主題：本條部落客要圍繞webpack提高建構效率，減少打包時間。
一、CDN引入
在項目中，平常會引入一些第三方依賴，類似于echarts、jquery。這樣打包後的vendor.js非常大，可以将第三方庫以cdn方式引入，也可以将資源下載下傳到伺服器引入。
1.webpack配置externals
entry: ... ,
output: ... ,
// 外部引用，不需要打包
externals:{
jquery:‘$‘,
echarts: ‘echarts‘
},
...
2.html中通過script标簽引入資源(echarts cdn位址：
3.import引入
4.檔案大小和建構速度對比
*使用cdn引入
*未使用cdn
二、優化Loader
loader能夠加載資源檔案并進行特定處理，是以在查找比對資源檔案時我們可以使用exclude和include縮小搜尋範圍來優化效率。
{
test: /\.js$/,
loader: ‘babel-loader?cacheDirectory‘,
include: projectRoot,
exclude: /node_modules/
}
三、DllPlugin
DLLPlugin和 DDLReferencePlugin通過拆分 bundles提升建構的速度。可以将特定類庫提前打包然後引入。
1.單獨建立配置檔案webpack.dll.conf.js
const path = require(‘path‘);
const webpack = require(‘webpack‘);
module.exports = {
mode: ‘development‘,
entry: {
// 一般将不經常更新的依賴預先打包
vendor: [‘vue‘,‘vuex‘,‘vue-router‘,‘axios‘]
},
output: {
path: path.resolve(__dirname,‘dist‘),
filename: ‘[name].dll.js‘,
library: ‘_dll_[name]‘
},
plugins:[
new webpack.DllPlugin({
context: __dirname,
// name需要和output内的library保持一緻
name: ‘_dll_[name]‘,
// DLLPlugin會生成一個mainfest.json檔案，用來将DDLReferencePlugin映射到相關依賴。
path: path.resolve(__dirname, ‘dist‘, ‘mainfest.json‘)
})
]
}
2.webpack.conf.js中配置plugin
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.resolve(__dirname,‘dist‘,‘mainfest.json‘)
}),
3.使用 webpack --config webpack.config.js 指令打包第三方庫(生成以下檔案)
4.html中引入打包好的第三方庫
在這裡可以使用 add-asset-html-webpack-plugin 插件将js添加到html中
四、HappyPack
node是單線程運作，是以webpack打包也是單線程。如果需要webpack同一時間處理多個任務，可以使用HappyPack。HappyPack可以将任務分給多個程序，子程序将處理結果傳回給主程序。
1.安裝
npm install happypack -D
2.配置
// 1.引入happypack
let HappyPack = require(‘happypack‘)
module.exports = {
entry: ... ,
output: ... ,
mode: ‘production‘,
module:{ // 子產品
rules: [
{
test:/\.js$/,
use:{
// 2.修改loader配置
loader:‘happypack/loader?id=happyBabel‘
},
exclude:/node_modules/
},
...
]
},
plugins: [
// 3.plugin添加
new HappyPack({
// 和loader id對應，處理哪類檔案
id: ‘happyBabel‘,
// 如何處理，配置内容和loader一緻
loaders: [{
loader: ‘babel-loader‘,
query: {
presets:[
[email protected]/preset-env‘
],
plugins:[
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
"@babel/plugin-transform-runtime"
],
}
}]
}),
...
],
}
原文：https://www.cnblogs.com/zhaojingj/p/12741344.html