webpack构建速度和打包体积优化方案

一、分析工具

1.1 webpack-bundle-analyzer

生成 stats.json 文件

1. 打包命令

webpack --config webpack.config.js --json > stats.json

2. 使用 webpack-bundle-analyzer 插件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [new BundleAnalyzerPlugin({generateStatsFile: truestatsFilename: 'stats.json', // 指定文件名})
]

1.2 Bundle optimize helper

1.3 Webpack Visualizer

1.4 Webpack Analyzer

依赖关系多不适用

二、构建速度优化

2.1 构建速度分析插件

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap(config);

优化的方式无非几点：

• 缓存构建结果
• 缩小构建范围
• 并行构建

2.2 缓存

• cache-loader 用于缓存多个 loader 的输出

{test: /\.js$/,use: ['cache-loader', ...loaders],include: path.resolve('src'),
}

一些内置的 loader 自带缓存功能，比如

• babel-loader

{test: /\.js$/,loader: 'babel-loader',options: {cacheDirectory: true,},include: path.