webpack的優化

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會生成對應壓縮文件.