拆包 optimization.splitChunks
const optimization = {
splitChunks: {
cacheGroups: {
name: {
test: /vue/, // 正则匹配需要拆包的文件
name: '',
priority: 100, // 权重
// 全部|异步|同步,多页也可以写成函数返回对应的chunk
chunks: 'all' | 'async' | 'initial'
chunks(chunk) {
return chunk.name === 'chunk'
}
}
}
}
}
分析打包情况
-
webpack-bundle-analyzer可视化打包内容
// 分析包内容 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ // 开启 BundleAnalyzerPlugin new BundleAnalyzerPlugin(), ], };
-
speed-measure-webpack-plugin测量打包时间
/ 分析打包时间 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); // ... module.exports = smp.wrap(prodWebpackConfig)
DLL
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ......
plugins: [
new HardSourceWebpackPlugin() // <- 直接加入这行代码就行
]
}