不管你有多少經驗,寫js和css總會產生冗余無用的代碼,這些代碼占據著文件大小和性能,所以我們需要及時清理這些冗余代碼。
清理無用的css代碼是非常重要的,可以有效地減小文件大小和樣式沖突的幾率。工具類可以使用uncss,它可以通過分析html文件來找到不被引用的css代碼并移除掉。另外,PurifyCSS也是很好的一個選擇,它可以根據你提供的html和js文件來識別哪些css代碼未被使用。
// 使用uncss npm install -g uncss // 運行uncss uncss input.html --css input.css >output.css // 使用PurifyCSS npm install -g purify-css // 運行PurifyCSS purifycss input.html input.js input.css -o output.css
清理無用的js代碼同樣也是非常關鍵的,減小文件大小和優化性能。可以使用Closure Compiler,它是由Google開發的一個壓縮和優化js代碼的工具。同時,如果你使用的是ES6及以上版本的js語法,可以使用Babel來轉換成ES5語法后再壓縮。
// 使用Closure Compiler java -jar compiler.jar --js script.js --js_output_file script.min.js // 使用Babel npm install --save-dev @babel/core @babel/cli @babel/preset-env // 運行Babel npx babel script.js --out-file script.es5.js --presets=@babel/env // 壓縮js文件 java -jar closure-compiler.jar --js script.es5.js --js_output_file script.min.js
總之,我們需要時刻檢查和優化我們的代碼,去掉無用和冗余的部分,以提高性能和文件下載速度。