前言
最近在看 webpack 如何做持久化緩存的內(nèi)容，發(fā)現(xiàn)其中還是有一些坑點的，正好有時間就將它們整理總結(jié)一下，讀完本文你大致能夠明白：
持久化緩存
首先我們需要去解釋一下，什么是持久化緩存，在現(xiàn)在前后端分離的應(yīng)用大行其道的背景下，前端 html，css，js 往往是以一種靜態(tài)資源文件的形式存在于服務(wù)器，通過接口來獲取數(shù)據(jù)來展示動態(tài)內(nèi)容。這就涉及到公司如何去部署前端代碼的問題，所以就涉及到一個更新部署的問題，是先部署頁面，還是先部署資源？
先部署頁面，再部署資源：在二者部署的時間間隔內(nèi)，如果有用戶訪問頁面，就會在新的頁面結(jié)構(gòu)中加載舊的資源，并且把這個舊版本資源當(dāng)做新版本緩存起來，其結(jié)果就是：用戶訪問到一個樣式錯亂的頁面，除非手動去刷新，否則在資源緩存過期之前，頁面會一直處于錯亂的狀態(tài)。
先部署資源，再部署頁面：在部署時間間隔內(nèi)，有舊版本的資源本地緩存的用戶訪問網(wǎng)站，由于請求的頁面是舊版本，資源引用沒有改變，瀏覽器將直接使用本地緩存，這樣屬于正常情況，但沒有本地緩存或者緩存過期的用戶在訪問網(wǎng)站的時候，就會出現(xiàn)舊版本頁面加載新版本資源的情況，導(dǎo)致頁面執(zhí)行錯誤。
所以我們需要一種部署策略來保證在更新我們線上的代碼的時候，線上用戶也能平滑地過渡并且正確打開我們的網(wǎng)站。
推薦先看這個回答：大公司里怎樣開發(fā)和部署前端代碼？
當(dāng)你讀完上面的回答，大致就會明白，現(xiàn)在比較成熟的持久化緩存方案就是在靜態(tài)資源的名字后面加 hash 值，因為每次修改文件生成的 hash 值不一樣，這樣做的好處在于增量式發(fā)布文件，避免覆蓋掉之前文件從而導(dǎo)致線上的用戶訪問失效。
因為只要做到每次發(fā)布的靜態(tài)資源(css, js, img)的名稱都是獨一無二的，那么我就可以：
上面大致介紹了下主流的前端持久化緩存方案，那么我們?yōu)槭裁葱枰龀志没彺婺兀?/p>
用戶使用瀏覽器第一次訪問我們的站點時，該頁面引入了各式各樣的靜態(tài)資源，如果我們能做到持久化緩存的話，可以在 http 響應(yīng)頭加上 Cache-control 或 Expires 字段來設(shè)置緩存，瀏覽器可以將這些資源一一緩存到本地。
用戶在后續(xù)訪問的時候，如果需要再次請求同樣的靜態(tài)資源，且靜態(tài)資源沒有過期，那么瀏覽器可以直接走本地緩存而不用再通過網(wǎng)絡(luò)請求資源。
webpack 如何做持久化緩存
上面簡單介紹完持久化緩存，下面這個才是重點，那么我們應(yīng)該如何在 webpack 中進行持久化緩存的呢，我們需要做到以下兩點：
hash 文件名是實現(xiàn)持久化緩存的第一步，目前 webpack 有兩種計算 hash 的方式([hash] 和 [chunkhash])
所以如果你只是單純地將所有內(nèi)容打包成同一個文件，那么 hash 就能夠滿足你了，如果你的項目涉及到拆包，分模塊進行加載等等，那么你需要用 chunkhash，來保證每次更新之后只有相關(guān)的文件 hash 值發(fā)生改變。
所以我們在一份具有持久化緩存的 webpack 配置應(yīng)該長這樣：
重慶分公司
重慶分公司
module.exports = {
entry: __dirname + '/src/index.js',
output: {
path: __dirname + '/dist',
filename: '[name].[chunkhash:8].js',
}
}另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
