vue构建项目入口文件index.html缓存引发的白屏问题

问题

  vue项目打包后,在非首次线上替换dist文件时,某些手机/浏览器在之后首次打开页面,可能出现白屏情况。那么该问题产生原因是什么呢?我们又该如何应对呢?

背景及原因分析

  在使用vue-cli脚手架构建完项目,项目完成后,需打包上线。默认打包方式则是npm build,然后项目根目录会生成 dist 文件夹。服务端将该文件夹替换线上即可。但是当第n(n>1)次上线后,由于在用户端会默认缓存index.html入口文件,而由于vue打包生成的css/js都是哈希值,跟上次的文件名都不同,因此会出现找不到css/js的情况,导致白屏的产生。

  经常使用vue作为开发框架的开发者都知道,build打包后,所生成的css/js的文件名中间会夹杂哈希值,以此来避免缓存问题。但是由于入口文件index.html的名字每次打包后不改变,并且也不能乱变,就导致了index.html在用户端仍然会被缓存下来。那么在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。解决方案一般是强制刷新页面或者清除缓存重新加载。当然,网上也给出不少的“缓解方案”。为什么称之为缓解方案而不是解决方案呢?因为前端缓存问题是一个具有行业性的难题,在没有根治之前,一般是优化为主。当然,引领前端行业的大佬们自然是要挑战极限的,不在该问题之内讨论。
  下面给出部分优化方案。

优化方案

方案1. meta标签

1
2
3
4
5
<!-- 在入口文件index.html中,头部添加meta标签 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

方案2. 时间戳区分

1
2
3
4
5
6
7
8
// webpack.prod.conf.js
const Version = new Date().getTime();

output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].'+_Version+'js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+_Version+'js')
}
方案3. 服务端配置
1
2
3
4
5
6
// nginx端配置
location = /index.html {
add_header Cache-Control "no-cache, no-store";
# add_header Cache-Control no-store;
# add_header Pragma no-cache;
}

方案对比

方案 操作难度 优缺点
1 html文件简单修改 基本上没用
2 webpack配置简单修改 跟hash值文件名一个性质,不解决痛点
3 服务端加配置,简单 解决部分缓存问题,不解决全部;白屏问题依旧存在

新思路

  在一些论坛中,在某些特定情况下(如混合开发App,原生嵌入webview还在h5),可在原生端尝试解决:

  • 加载webview前清除缓存再加载;
  • 销毁webview前清除缓存;

  效果如何,有待验证。

以上。

---本文结束感谢您的阅读---

本文标题:vue构建项目入口文件index.html缓存引发的白屏问题

文章作者:Lomo 朱幸民

发布时间:2019年09月03日 - 15:14:27

最后更新:2019年09月03日 - 20:24:37

原始链接:https://www.zhuxingmin.com/2019/09/03/vue构建项目入口文件index-html缓存引发的白屏问题/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%