webpack的最佳化策略

在我們建立單一頁面應用(vue, React)或封裝外掛程式時,很大機會用到webpack,這個JavaScript的打包工具.
但專案程式碼日益增多時,webpack一些簡單的設定會暴露種種弊端(打包時間長,程式碼大).
以下是結合自身開發與學習webpack流程解決問題的總結.

打包時間長

##DllPlugin

很多大家都知道

webpack.optimize.CommonsChunkPlugin這個插件是用來提取公共庫的,但這個插件也解決不了公共庫重複打包的問題.然而,
DllPlugin這個外掛就可以解決.這個外掛程式會先把公共庫打包.
它自己擁有獨立的webpack設定檔,設定檔入口處是需要打包的公共庫.
當它打包完後,會產生公共的js包和
manifest.json.
##manifest.json#是用來讓主設定檔DLLReferencePlugin映射到相關的依賴上去的devtool cheap-module-eval-source-map

當我們使用webpack打包後的程式碼都經過編譯的,所以變得難以調試.

所以webpack給了devtool的api,會透過Source Map找出出錯的正確位置.

選擇devtool的

cheap-module-eval-source-map原因是,每個模組使用eval()大幅提高持續建置效率和沒有產生列映射節省建置時間(瀏覽器引擎會自動給出列資訊).性能最佳化

樣式的分離與壓縮

使用

extract-text-webpack-plugin##將各個腳本裡的樣式提取到出來.如果設定allChunks: true
會使提取出來的樣式合併到一個檔案.使用 optimize-css-assets-webpack-plugin
將樣式進行壓縮.腳本的壓縮

使用

uglifyjs-webpack-plugin

將腳本進行壓縮.js效能最佳化

webpack每個模組都會放入一個閉包函數中.

使用

##webpack.optimize. ModuleConcatenationPlugin

會將相關聯的模組放入一個閉包裡.從而減少閉包的數量.提取公共代碼
使用

DllPlugin

或webpack.optimize.CommonsChunkPlugin會將公開的程式碼提取出來打包到其他檔案.避免重複打包,從而減少包裝的大小.伺服器預先壓縮
當服務開啟預壓縮時.

會優先取得以檔案名稱加上

.gz

結束的文件,這份文件是壓縮過後的檔案,體積會小.使用CompressionWebpackPlugin
會產生對應壓縮檔.相關建議：

react、webpack、跨域代理多頁

Vue+webpack基礎設定分享

webpack專案的網路最佳化程式碼分享

以上是webpack的最佳化策略的詳細內容。更多資訊請關注PHP中文網其他相關文章！