如何進(jìn)行清理服務(wù)器上webpack打包的過(guò)期hash文件

如何進(jìn)行清理服務(wù)器上webpack打包的過(guò)期hash文件？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

現(xiàn)在前端的項(xiàng)目基本上都會(huì)用 webpack 打包代碼，并且文件名（html 文件除外）都是 hash 化的，這樣可以去除瀏覽器的緩存。但是會(huì)產(chǎn)生另外一個(gè)問(wèn)題，就是服務(wù)器上會(huì)堆積大量過(guò)期（不會(huì)被用到）的 hash 文件，這些文件又主要是 js 和 css 文件，因?yàn)榛旧厦繕?gòu)建一次都會(huì)產(chǎn)生新的 js 和 css 文件。如果這些文件不清除的話，會(huì)大量占用服務(wù)器存儲(chǔ)空間。

1. 思路

1、從 html 文件中讀取 css 文件的 hash 值集合；

2、然后根據(jù)這些 hash 值集合，把 hash 不在這個(gè)集合內(nèi)的 css 文件刪掉；

3、從 html 文件中讀取 js 文件的 hash 值集合；

4、然后根據(jù)這些 hash 值集合，把不屬于動(dòng)態(tài)加載的，并且 hash 不在這個(gè)集合內(nèi)的 js 文件刪掉；（動(dòng)態(tài)加載 js 參考 dynamic-imports）

5、從不屬于動(dòng)態(tài)加載的 js 文件中讀取動(dòng)態(tài)加載的js 文件的 hash 值集合；

6、然后根據(jù)這些 hash 值集合，把動(dòng)態(tài)加載的，并且 hash 不在這個(gè)集合內(nèi)的 js 文件刪掉；

7、從剩下的 html,css,js 文件中讀取圖片、字體等其他靜態(tài)資源文件的 hash 值集合；

8、然后根據(jù)這些 hash 值集合，把 hash 不在這個(gè)集合內(nèi)的靜態(tài)資源文件刪掉。

2. sclean

基于上面這個(gè)思路，我封裝了一個(gè) npm 包：sclean.

主要有以下幾個(gè)功能：

1、備份服務(wù)器文件，因?yàn)閯h除是非常危險(xiǎn)的一個(gè)操作，所以在每次清除過(guò)期文件之前都會(huì)備份一次，當(dāng)然也可以手動(dòng)備份；

2、恢復(fù)服務(wù)器文件到之前備份的某個(gè)狀態(tài)（用于清除出錯(cuò)之后的恢復(fù)操作）；

3、根據(jù)配置進(jìn)行清除操作，比如自定義目標(biāo)目錄（dist, build），html文件（php, jsp），hash 長(zhǎng)度（32, 8）等。

安裝

npm install sclean -g

執(zhí)行清除操作

sclean

看完上述內(nèi)容，你們掌握如何進(jìn)行清理服務(wù)器上webpack打包的過(guò)期hash文件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！