1：通過(guò)externals配置來(lái)提取常用庫(kù)
2：利用DllPlugin和DllReferencePlugin預(yù)編譯資源模塊,通過(guò)DllPlugin來(lái)對(duì)那些我們引用但是絕對(duì)不會(huì)修改的npm包來(lái)進(jìn)行預(yù)編譯，再通過(guò)DllReferencePlugin將預(yù)編譯的模塊加載進(jìn)來(lái)垄开。
3：使用Happypack 實(shí)現(xiàn)多線程加速編譯,要注意的第一點(diǎn)是，它對(duì)file-loader和url-loader支持不好签财，所以這兩個(gè)loader就不需要換成happypack了唱蒸，其他loader可以類(lèi)似地?fù)Q一下
4：使用Tree-shaking和Scope Hoisting來(lái)剔除多余代碼
5：使用fast-sass-loader代替sass-loader
6：babel-loader開(kāi)啟緩存
babel-loader在執(zhí)行的時(shí)候，可能會(huì)產(chǎn)生一些運(yùn)行期間重復(fù)的公共文件屁魏，造成代碼體積大冗余，同時(shí)也會(huì)減慢編譯效率
可以加上cacheDirectory參數(shù)或使用 transform-runtime 插件試試
// webpack.config.js
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true
}]
// .bablerc
{
"presets": [
? ? "env",
? ? "react"
],
"plugins": ["transform-runtime"]
}
7：不需要打包編譯的插件庫(kù)換成全局"script"標(biāo)簽引入的方式
比如jQuery插件桃漾，react, react-dom等撬统，代碼量是很多的恋追，打包起來(lái)可能會(huì)很耗時(shí)
可以直接用標(biāo)簽引入苦囱，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供給模塊內(nèi)部使用相應(yīng)的變量
use: [{
loader: 'expose-loader',
options: '\$'
}, {
loader: 'expose-loader',
options: 'jQuery'
}]
externals: {
jquery: 'jQuery'
},
new webpack.ProvidePlugin({
\$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
8：webpack 打包會(huì)搜索路徑，為了提高搜索路徑的耗時(shí)瞧柔，有的可以寫(xiě)成絕對(duì)路徑以純模塊名來(lái)引入的可以加上一些目錄路徑
還可以善于用下resolve alias別名 這個(gè)字段來(lái)配置
另外exclude等的配置造锅，避免多余查找的文件，比如使用babel別忘剔除不需要遍歷
