前端性能提升之强缓存

背景：项目只使用了协商缓存（使用nginx默认生效不必配置），未使用强缓存，使用强缓存可以减少网络请求次数，不必像协商缓存那样还要请求服务器。通常情况下，为html文件设置协商缓存（比如更新了两个js文件中的一个，html需在script标签中引用这两个js文件，为了引用更新后的那个js文件，需使用最新的html文件而html文件不带hash所以不用强缓存否则获取不到最新html文件），为文件名带hash的资源文件设置强缓存。文件同时设置强缓存和协商缓存时，会优先使用强缓存。

配置强缓存：
vue-cli项目production环境下会为js文件名增加hash，可在该环境的nginx配置中为js文件设置强缓存，不必担心文件更新而使用强缓存获取到未更新数据（因为更新后的文件携带了不同hash值，相当于请求新资源不会命中强缓存），而development环境不会为js文件名增加hash（对于@vue/cli-service"4.5.13"版本源码，在/lib/config/app.js的22行可以看到isProd的变量，29行可以看到`{isProd && options.filenameHashing? '.[contenthash:8]': ''}.js`对js的文件名设置，以及13行可以看到'.[hash:8]'）。两个环境都会对png和svg文件增加hash（对于@vue/cli-service"4.5.13"版本源码，在/lib/config/base.js的159-175行可以看到对png和svg的webpack配置，以及13行可以看到'.[hash:8]'）。

nginx配置：

location ~ .* |.*\.(png|svg){ // production环境增加js
  add_header Cache_Control max-age=36000; // 10小时
  root /usr/share/nginx/html; // 项目流水线部署后的项目打包后的部署地址
}

效果：在请求了png或svg资源的页面点刷新，在Network面板可以发现，size值为memory cache或disk cache，Time值（请求消耗时间）比较小，注意不要勾选Network面板的"Disable cache"。

针对gis接口进行处理
项目有gis接口比如getMap，接口返回值为图片，该接口的代理要放在上面的配置的前面并设置^~避免向下继续匹配。否则匹配了规则"location ~ .* |.*.(png|svg)"，就会使用里面的root地址，导致请求getMap接口数据比如abc.png，就会请求/usr/share/nginx/html/getMap/abc.png，导致请求报404。

nginx配置：

location ^~ /getMap/ { // gis接口
  proxy_pass http://10.2.56.265/; // 代理地址
  add_header Cache_Control max-age=36000; // 为图片接口也设置强缓存。如果该接口返回的图片名不带hash，可以综合考虑是否使用强缓存（使用强缓存优点是第二次访问该接口图片时加载速度会很快）
}
location ~ .* |.*\.(png|svg){ // production环境增加js
  add_header Cache_Control max-age=36000; // 10小时
  root /usr/share/nginx/html; // 项目流水线部署后的项目打包后的部署地址
}