問題
??vue項目打包后澄步，在非首次線上替換dist文件時，某些手機/瀏覽器在之后首次打開頁面目锭，可能出現(xiàn)白屏情況。那么該問題產(chǎn)生原因是什么呢纷捞？我們又該如何應對呢痢虹？
背景及原因分析
??在使用vue-cli腳手架構建完項目，項目完成后主儡，需打包上線奖唯。默認打包方式則是npm build，然后項目根目錄會生成 dist 文件夾糜值。服務端將該文件夾替換線上即可丰捷。但是當?shù)趎（n>1）次上線后，由于在用戶端會默認緩存index.html入口文件寂汇，而由于vue打包生成的css/js都是哈希值病往，跟上次的文件名都不同，因此會出現(xiàn)找不到css/js的情況骄瓣，導致白屏的產(chǎn)生停巷。
??經(jīng)常使用vue作為開發(fā)框架的開發(fā)者都知道，build打包后榕栏，所生成的css/js的文件名中間會夾雜哈希值畔勤，以此來避免緩存問題。但是由于入口文件index.html的名字每次打包后不改變扒磁，并且也不能亂變庆揪，就導致了index.html在用戶端仍然會被緩存下來。那么在服務端更新包之后妨托，由于舊的文件被刪除缸榛，而index.html所鏈接的路徑依然是舊文件路徑检访，因此會找不到文件，從而白屏仔掸。解決方案一般是強制刷新頁面或者清除緩存重新加載脆贵。當然，網(wǎng)上也給出不少的“緩解方案”起暮。為什么稱之為緩解方案而不是解決方案呢卖氨？因為前端緩存問題是一個具有行業(yè)性的難題，在沒有根治之前负懦，一般是優(yōu)化為主筒捺。當然，引領前端行業(yè)的大佬們自然是要挑戰(zhàn)極限的纸厉，不在該問題之內(nèi)討論系吭。
??下面給出部分優(yōu)化方案。
優(yōu)化方案
方案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. 時間戳區(qū)分
// 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;
}
方案對比
| 方案 | 操作難度 | 優(yōu)缺點 |
|---|---|---|
| 1 | html文件簡單修改 | 基本上沒用 |
| 2 | webpack配置簡單修改 | 跟hash值文件名一個性質(zhì)肯尺，不解決痛點 |
| 3 | 服務端加配置，簡單 | 解決部分緩存問題躯枢，不解決全部则吟；白屏問題依舊存在 |
新思路
??在一些論壇中，在某些特定情況下（如混合開發(fā)App锄蹂，原生嵌入webview還在h5)氓仲，可在原生端嘗試解決：
- 加載webview前清除緩存再加載；
- 銷毀webview前清除緩存得糜；
??效果如何敬扛，有待驗證。
以上朝抖。
