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. 使用生产模式

生产