構建速度的優化:
1.HappyPack
基於webpack的編譯模式本是單線程,時間佔時最多的Loader對文件的轉換。 開啓HappyPack,可以講任務分解成多個進程去並行處理。
簡單配置:
new HappyPack({
// 用唯一的標識符 id 來代表當前的 HappyPack 是用來處理一類特定的文件
id: 'babel',
// 如何處理 .js 文件,用法和 Loader 配置中一樣
loaders: ['babel-loader?cacheDirectory'],
// ... 其它配置項
}),
詳細可參考:http://www.fly63.com/nav/1472
2.DllPlugin
可將一些Node_moudle一些編譯好的庫,常用而且不變的庫,抽出來。這樣就無需重新編譯。
3.Loader 記錄配置搜索範圍,include,exclude
如: {
test: /\.js$/, //js文件加載器
exclude: /node_modules/,
use: [
{
loader: 'babel-loader?cacheDirectory=ture',
options: {
presets: ['@babel/preset-env']
},
include: Path2D.resolve(__dirname, 'src')
}
]
},
優化打包大小:
1.tree shaking寫法。
即“搖樹”。即只引入所需要引入部分,其餘的代碼講會過濾。
2.壓縮代碼
當前最程愫的壓縮工具是UglifyJS。HtmlWebpackPlugin也可配置minify等。
3.文件分離
多個文件加載,速度更快。
例如:mini-css-extract-plugin,將css獨立出來。
這樣還有利於,部分“不變”的文件做緩存。
4.Scope Hoisting
開啓後,分細分出模塊直接的依賴關係,會自動幫我們合併函數。
簡單的配置:
module,exports={
optimization:{
concatenateModules:true
}
}
此外:
如webpack問題還存在,推薦webpack-analysis進行分析。