問題
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標簽
<!-- 在入口文件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. 時間戳區分
// 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. 服務端配置
// 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前清除緩存；
效果如何，有待驗證。
以上。
作者：流眸Tel
鏈接：https://www.jianshu.com/p/7b1b725b1b50
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。