淺談Webpack持久化緩存實踐-創(chuàng)新互聯(lián)

前言

站在用戶的角度思考問題，與客戶深入溝通，找到印江網(wǎng)站設(shè)計與印江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋印江地區(qū)。

最近在看 webpack 如何做持久化緩存的內(nèi)容，發(fā)現(xiàn)其中還是有一些坑點的，正好有時間就將它們整理總結(jié)一下，讀完本文你大致能夠明白：

什么是持久化緩存，為什么做持久化緩存?
webpack 如何做持久化緩存？
webpack 做緩存的一些注意點。

持久化緩存

首先我們需要去解釋一下，什么是持久化緩存，在現(xiàn)在前后端分離的應(yīng)用大行其道的背景下，前端 html，css，js 往往是以一種靜態(tài)資源文件的形式存在于服務(wù)器，通過接口來獲取數(shù)據(jù)來展示動態(tài)內(nèi)容。這就涉及到公司如何去部署前端代碼的問題，所以就涉及到一個更新部署的問題，是先部署頁面，還是先部署資源？

先部署頁面，再部署資源：在二者部署的時間間隔內(nèi)，如果有用戶訪問頁面，就會在新的頁面結(jié)構(gòu)中加載舊的資源，并且把這個舊版本資源當做新版本緩存起來，其結(jié)果就是：用戶訪問到一個樣式錯亂的頁面，除非手動去刷新，否則在資源緩存過期之前，頁面會一直處于錯亂的狀態(tài)。

先部署資源，再部署頁面：在部署時間間隔內(nèi)，有舊版本的資源本地緩存的用戶訪問網(wǎng)站，由于請求的頁面是舊版本，資源引用沒有改變，瀏覽器將直接使用本地緩存，這樣屬于正常情況，但沒有本地緩存或者緩存過期的用戶在訪問網(wǎng)站的時候，就會出現(xiàn)舊版本頁面加載新版本資源的情況，導(dǎo)致頁面執(zhí)行錯誤。

所以我們需要一種部署策略來保證在更新我們線上的代碼的時候，線上用戶也能平滑地過渡并且正確打開我們的網(wǎng)站。

推薦先看這個回答：大公司里怎樣開發(fā)和部署前端代碼？

當你讀完上面的回答，大致就會明白，現(xiàn)在比較成熟的持久化緩存方案就是在靜態(tài)資源的名字后面加 hash 值，因為每次修改文件生成的 hash 值不一樣，這樣做的好處在于增量式發(fā)布文件，避免覆蓋掉之前文件從而導(dǎo)致線上的用戶訪問失效。

因為只要做到每次發(fā)布的靜態(tài)資源(css, js, img)的名稱都是獨一無二的，那么我就可以：

針對 html 文件：不開啟緩存，把 html 放到自己的服務(wù)器上，關(guān)閉服務(wù)器的緩存，自己的服務(wù)器只提供 html 文件和數(shù)據(jù)接口
針對靜態(tài)的 js，css，圖片等文件：開啟 cdn 和緩存，將靜態(tài)資源上傳到 cdn 服務(wù)商，我們可以對資源開啟長期緩存，因為每個資源的路徑都是獨一無二的，所以不會導(dǎo)致資源被覆蓋，保證線上用戶訪問的穩(wěn)定性。
每次發(fā)布更新的時候，先將靜態(tài)資源(js, css, img) 傳到 cdn 服務(wù)上，然后再上傳 html 文件，這樣既保證了老用戶能否正常訪問，又能讓新用戶看到新的頁面。

上面大致介紹了下主流的前端持久化緩存方案，那么我們?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 值的唯一性，即為每個打包后的資源生成一個獨一無二的 hash 值，只要打包內(nèi)容不一致，那么 hash 值就不一致。
保證 hash 值的穩(wěn)定性，我們需要做到修改某個模塊的時候，只有受影響的打包后文件 hash 值改變，與該模塊無關(guān)的打包文件 hash 值不變。

hash 文件名是實現(xiàn)持久化緩存的第一步，目前 webpack 有兩種計算 hash 的方式([hash] 和 [chunkhash])

hash 代表每次 webpack 在編譯的過程中會生成唯一的 hash 值，在項目中任何一個文件改動后就會被重新創(chuàng)建，然后 webpack 計算新的 hash 值。
chunkhash 是根據(jù)模塊計算出來的 hash 值，所以某個文件的改動只會影響它本身的 hash 值，不會影響其他文件。

所以如果你只是單純地將所有內(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)用場景需求。

分享名稱：淺談Webpack持久化緩存實踐-創(chuàng)新互聯(lián)
URL分享：http://bm7419.com/article40/gjoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、ChatGPT、App開發(fā)、建站公司、網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容