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: true
        statsFilename: '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.