如何進行清理服務器上webpack打包的過期hash文件

如何進行清理服務器上webpack打包的過期hash文件？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

現在前端的項目基本上都會用 webpack 打包代碼，并且文件名（html 文件除外）都是 hash 化的，這樣可以去除瀏覽器的緩存。但是會產生另外一個問題，就是服務器上會堆積大量過期（不會被用到）的 hash 文件，這些文件又主要是 js 和 css 文件，因為基本上每構建一次都會產生新的 js 和 css 文件。如果這些文件不清除的話，會大量占用服務器存儲空間。

1. 思路

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

2、然后根據這些 hash 值集合，把 hash 不在這個集合內的 css 文件刪掉；

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

4、然后根據這些 hash 值集合，把不屬于動態加載的，并且 hash 不在這個集合內的 js 文件刪掉；（動態加載 js 參考 dynamic-imports）

5、從不屬于動態加載的 js 文件中讀取動態加載的js 文件的 hash 值集合；

6、然后根據這些 hash 值集合，把動態加載的，并且 hash 不在這個集合內的 js 文件刪掉；

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

8、然后根據這些 hash 值集合，把 hash 不在這個集合內的靜態資源文件刪掉。

2. sclean

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

主要有以下幾個功能：

1、備份服務器文件，因為刪除是非常危險的一個操作，所以在每次清除過期文件之前都會備份一次，當然也可以手動備份；

2、恢復服務器文件到之前備份的某個狀態（用于清除出錯之后的恢復操作）；

3、根據配置進行清除操作，比如自定義目標目錄（dist, build），html文件（php, jsp），hash 長度（32, 8）等。

安裝

npm install sclean -g

執行清除操作

sclean

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