服務(wù)器上webpack打包的過(guò)時(shí)hash文件如何進(jì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

以上就是服務(wù)器上webpack打包的過(guò)期hash文件如何進(jìn)行清理的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！