Webpack优化详解

Webpack 5提供了一系列工具和功能，可以在本地开发和线上构建过程中进行优化，以提高开发效率和构建性能。

1. 本地开发优化

1.1. 开启模块热替换（HMR）

模块热替换可以在不刷新整个页面的情况下更新模块，提高开发效率。

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devServer: {
    contentBase: './dist',
    hot: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

1.2. 使用 Source Maps

Source Maps 有助于在浏览器中调试原始源代码，而不是转换后的代码。不同类型的 Source Maps 在性能和详细程度上有所不同。

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map', // 'source-map' | 'cheap-module-source-map' | 'eval-source-map' 等
};

1.3. 优化编译速度

使用 cache 和 parallel 选项来加速构建过程。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'development',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
      }),
    ],
  },
};

1.4. 使用持久化缓存

Webpack 5 提供了持久化缓存功能，可以显著提高重复构建的速度。

module.exports = {
  cache: {
    type: 'filesystem', // 使用文件系统缓存
  },
};

1.5. 更快的增量编译

配置 watchOptions 来优化文件监听，减少不必要的文件扫描。

module.exports = {
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300, // 防抖延迟
    poll: 1000, // 轮询时间
  },
};

2. 线上产物构建优化

2.1. 使用生产模式

生产