如何進行清理服務器上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文件的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注創新互聯網站制作公司行業資訊頻道,感謝各位的閱讀!