优化vue项目缓存引发的白屏

Posted 2021-03-30 流眸

发现问题

近期vue项目在构建完成上线之后，每次往线上更新版本，总会收到一部分反馈——web页面白屏，需要清除缓存数据重新加载才能正常访问。

问题分析

首先排除掉了publicPath设置问题，因为大部分用户能正常访问到页面，无报错。其次排除首页加载过慢问题，因为白屏无论多久都不会渲染页面。最终定位到缓存问题，产生原因如下：

“

在首次上线项目时，build生成的资源文件直接放到服务端上线即可。但是当第n（n>1）次上线后，由于在用户端会默认缓存index.html入口文件，而由于vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此会出现找不到css/js的情况，导致白屏的产生。

优化方案

1. meta标签

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">

2. 时间戳区分

在项目的配置页面添加打包配置，根据vue脚手架不同分以下两种情况：

1. vue-cli@2.x

// webpack.prod.conf.js
const Timestamp = new Date().getTime();
...

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].' + Timestamp + 'js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Timestamp + 'js')
}

2. vue-cli@3.x

// vue.config.js
const Timestamp = new Date().getTime();
...
module.exports = {
    configureWebpack: config => {
        config.output.filename = `js/[name].${Timestamp}.js?t=[hash]`;
        config.output.chunkFilename = `js/[id].${Timestamp}.js?t=[hash]`;
    },

    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.plugin('extract-css').tap(args => [{
                filename: `css/[name].${Timestamp}.css`,
                chunkFilename: `css/[name].${Timestamp}.css`
            }])
        }
    },
}

3. 服务端配置(nginx)

这个有非常重要，需要跟服务端同事沟通，请他们在服务端配合配置nginx服务。服务端配置主要解决：

• 设置 index.html在用户端不缓存，这样每次拉取的都是线上最新资源；
• 设置 css和 js文件一定的缓存期，合理利用缓存。

这样配置的好处是，如果线上资源没有更新，我们合理的利用缓存对大体积资源（样式脚本等）缓存，如果更新了资源，那么index.html文件则实时更新，用户端所得到的html文件也是最新资源，样式及脚本资源都会重新获取服务器最新资源缓存到本地。

server {
        listen       90;
        server_name  22782.s1.natapp.cc;
        location / {
          root /apps/laikePay/;	
          try_files $uri $uri/ /index.html;
				}

      location ^~ /beauty/{
                  alias /apps/laikeBeauty/;
        #以下配置解决html不缓存，css和js分别缓存7天和30天
        if ($request_filename ~* .*\.(?:htm|html)$)
            {
                  add_header Cache-Control "private, no-store, no-cache";
            }
        if ($request_filename ~* .*\.(?:js|css)$)
            {
                  add_header Cache-Control max-age=604800;
            }
        if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
            {
                  add_header Cache-Control max-age=2592000;
            }
                  try_files $uri $uri/ /beauty/index.html;
      }
      location  ^~ /beautyThemeChange/{
            alias /apps/laikeBeautyThemeChange/;
            try_files $uri $uri/ /beautyThemeChange/index.html;
    	}
    	location  ^~ /retail/{
         #   alias /apps/laikeRetail/;
         #   try_files $uri $uri/ /retail/index.html;
        proxy_pass http://22782.s1.natapp.cc/beauty/;
      }

      #location ^~ /merchantPhoneApp/ {
        #alias /apps/merchantPhoneApp/;
        #try_files $uri $uri/ /merchantPhoneApp/index.html;
      #}
}