发现问题
近期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脚手架不同分以下两种情况：
- 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')
}
- 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;
#}
}
