前言

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

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

持久化緩存

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

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

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

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

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

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

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

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

上面大致介紹了下主流的前端持久化緩存方案，那么我們為什么需要做持久化緩存呢？