构建优化

分析工具

• webpack-bundle-analyzer：可视化方式看打包的 bundle 中包含哪些模块内容、大小
• webpackbar：实时显示打包进度
• 实时显示打包进度：可以看到每个 loader 和 plugin 耗时情况
• speed-measure-webpack-plugin：分析打包速度

构建速度优化

思路：从 模块搜索时间、解析时间、压缩时间、二次打包时间 入手

多进程构建

• 运行在 Node.js 之上的 webpack 是单线程模式的，webpack 打包只能逐个文件处理
• 使用 happypack（废弃）、thread-loader（推荐）
• 仅在耗时的 loader 上使用，如果是小项目，不要开启多进程构建，开启进程需要花费时间，构建反而变慢

// 把它放置在其它 loader 之前
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['thread-loader', 'babel-loader'],
      },
    ],
  },
};

利用缓存，提升二次构建速度

• 使用缓存后，node_modules 中会有一个.cache 目录，用于存放缓存内容

• cache-loader：只对性能开销较大的 loader 使用，保存和读取缓存文件有开销

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['cache-loader', 'babel-loader'],
        },
      ],
    },
  };
  

• babel-loader 开启缓存，在 babel-loader 后面加上?cacheDirectory=true

• hard-source-webpack-plugin：用于开启模块的缓存

• terser-webpack-plugin 开启缓存

缩小打包作用域

• exclude/include：确定 loader 规则范围，node_modules 里的 js 文件基本上都是转译好了的，不需要再次处理，用 include/exclude 来避免不必要的转译
• 优化 resolve.alias：可减少耗时的递归解析操作
• 优化 resolve.extensions：列表要尽可能的小，尽可能减少后缀尝试次数；频率出现高的后缀优先放前面，尽快退出寻找过程；写导入语句时，尽可能带上后缀，避免寻找过程
• resolve.modules：指明第三方模块的绝对路径，减少不必要的查找
• 优化 resolve.mainFields：一些第三方模块会针对不同环境提供几分代码，位置写在 package.json 文件里，webpack 会根据 mainFields 配置决定优先采用哪份代码
• 优化 module.noParse：对不需要解析的库进行忽略（jquery、echarts），不解析但仍打包到 bundle 中，被忽略掉的文件里不应该包含 import、require、define 等模块化语句

动态链接库

• 将第三方库代码和业务代码都打包进一个 bundle，那么处理这个 bundle 文件的插件（比如压缩之类的插件），就没办法不处理里面第三方库内容

• 第三方库代码基本都是成熟的，不用作处理，可以将第三方库代码分离出来

• 配置 externals，每一个库都在 html 文档中引入一个 script 标签，js 文件下载影响性能，而且我们只使用库中的部分功能，script 标签全量引入不合理

• SplitChunks 在每一次构建会重新构建第三方库，不能有效提升构建速度

• 使用 DllPlugin 和 DLLReferencePlugin（配合使用，webpack 内置插件），会将不频繁更新的第三方库单独打包，当这些第三方库版本没有变化时，不需要重新构建

  // webpack.dll.js 用于打包第三方库
  const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
    mode: 'production',
    entry: {
      three: ['jquery', 'lodash'], // 第三方库配置
    },
    output: {
      filename: '[name].dll.js', // [name] 就是在 entry
      path: path.resolve(__dirname, 'dist/lib'),
      library: '[name]',
    },
    plugins: [
      new webpack.DllPlugin({
        name: '[name]',
        path: path.resolve(__dirname, 'dist/lib/[name].json'), // manifest.json 的存放位置
      }),
    ],
  };
  

  module.exports = {
    plugins: [
      // 修改 CleanWebpackPlugin 配置
      new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: [
          '!lib/**', // 在每次清除 dist 目录时，不清理 lib 文件夹
        ],
      }),
      // dll 相关配置
      new webpack.DllReferencePlugin({
        // 将 manifest 字段配置成第1步中打包出来的 json 文件
        manifest: require('./dist/lib/three.json'),
      }),
    ],
  };
  

优化构建体积

代码分割

分离第三方库和业务代码中的基础库，通过 SplitChunks 或动态链接库

动态 import

• 减少首屏资源的体积，非首屏的资源在用到的时候再去请求
• 路由配置使用 import() 来引入页面组件，凡是通过 import() 引用的模块都会打包成独立 bundle

tree shaking

• 使用 esm 模块规范
• 不要使用 export default
• 那么在 mode：production 生产环境，就会自动开启 tree-shaking，移除没有使用到的代码

代码压缩

• mode：production 自动开启

• uglifyjs-webpack-plugin（废弃） 和 terser-webpack-plugin（推荐）

  const TerserPlugin = require('terser-webpack-plugin');
  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
          parallel: true, // 开启并行压缩，加快构建速度
          sourceMap: true, // 使用 source-maps
        }),
      ],
    },
  };
  

  terser 是什么：用于 ES6+ 的 JavaScript 解析器、mangler/compressor（压缩器）工具包。

• gzip

  compression-webpack-plugin

  const CompressionWebpackPlugin = require('compression-webpack-plugin');
  module.exports = {
    plugins: [
      new CompressionWebpackPlugin({
        test: /\.(js|css)$/, // 匹配要压缩的文件
        algorithm: 'gzip',
      }),
    ],
  };