面试题：Webpack CLI 脚手架下如何优化多页应用打包

Question

假设你正在使用 Webpack CLI 脚手架开发一个多页应用，描述你会采取哪些策略来优化打包过程，提高打包速度和产出代码的质量。比如，如何配置 Webpack 以实现公共代码的提取、如何优化图片等静态资源的加载等，并说明对应的 Webpack 配置及 CLI 操作。

Answer 1

公共代码提取

1. 策略：使用 splitChunks 插件将公共代码提取出来，避免重复打包。
2. Webpack 配置：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

3. CLI 操作：无需额外 CLI 操作，配置完成后执行正常的打包命令（如 webpack --config webpack.config.js）即可。

图片等静态资源加载优化

1. 策略：
   • 使用 url-loader 和 file-loader 处理图片。url-loader 可以将小图片转换为 base64 编码嵌入到代码中，减少请求数量；file-loader 用于处理较大图片，将其输出到指定目录并生成正确的引用路径。
   • 启用图片压缩，如使用 image-webpack-loader 对图片进行压缩。
2. Webpack 配置：

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8kb的图片转换为base64
              name: 'images/[name].[hash:8].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

3. CLI 操作：确保安装了相关 loader，如 npm install url-loader file-loader image-webpack-loader -D，配置完成后执行正常的打包命令（如 webpack --config webpack.config.js）。

其他优化策略

1. 开启多进程打包：
   • 策略：使用 thread-loader 在多核 CPU 机器上并行处理 loader，提高打包速度。
   • Webpack 配置：

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset - env']
            }
          }
        ]
      }
    ]
  }
};

• CLI 操作：安装 thread-loader（npm install thread-loader -D），然后执行正常打包命令。

2. 使用 terser-webpack-plugin 进行代码压缩：
   • 策略：terser-webpack-plugin 是 Webpack 内置的代码压缩插件，能有效压缩 JavaScript 代码。
   • Webpack 配置：

module.exports = {
  //...
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 开启多线程压缩
        terserOptions: {
          compress: {
            drop_console: true // 移除console.log
          }
        }
      })
    ]
  }
};

• CLI 操作：无需额外 CLI 操作，配置完成后执行正常打包命令。此插件默认已启用，上述配置是进一步优化。