推荐答案
1. 使用 cache 配置
Webpack 5 引入了持久化缓存机制，可以通过配置 cache 选项来启用。这可以显著减少重复构建的时间。
module.exports = {
cache: {
type: 'filesystem',
},
};2. 使用 thread-loader 或 HappyPack
对于耗时的 loader，可以使用 thread-loader 或 HappyPack 来并行处理任务，从而加快构建速度。
// www.javascriptcn.com code example
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: [
'thread-loader',
'babel-loader',
],
},
],
},
};3. 使用 DllPlugin 和 DllReferencePlugin
将不常变动的第三方库打包成单独的 DLL 文件，减少每次构建时的重复打包。
// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: ['react', 'react-dom'],
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].dll.js',
library: '[name]_[hash]',
},
plugins: [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, 'dist', '[name]-manifest.json'),
}),
],
};4. 使用 externals 配置
将一些大型库通过 CDN 引入，而不是打包到项目中，减少构建时间。
module.exports = {
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
};5. 使用 splitChunks 进行代码分割
通过 splitChunks 将公共代码提取到单独的 chunk 中，减少重复打包。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};6. 使用 terser-webpack-plugin 进行压缩
使用 terser-webpack-plugin 替代默认的压缩工具，提升压缩效率。
// www.javascriptcn.com code example
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
}),
],
},
};7. 减少 resolve 配置中的查找范围
通过配置 resolve.modules 和 resolve.extensions 减少模块查找时间。
module.exports = {
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.jsx'],
},
};8. 使用 IgnorePlugin 忽略不必要的模块
通过 IgnorePlugin 忽略一些不必要的模块，减少打包体积。
// www.javascriptcn.com code example
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
],
};本题详细解读
1. 使用 cache 配置
Webpack 5 引入了持久化缓存机制，通过配置 cache 选项，可以将构建过程中的中间结果缓存到磁盘中。这样在后续的构建中，Webpack 可以直接使用缓存的结果，而不需要重新构建，从而显著减少构建时间。
2. 使用 thread-loader 或 HappyPack
thread-loader 和 HappyPack 都是用于并行处理任务的工具。它们可以将耗时的 loader 任务分配到多个线程中执行，从而加快构建速度。thread-loader 是 Webpack 官方推荐的解决方案，而 HappyPack 是一个社区维护的插件。
3. 使用 DllPlugin 和 DllReferencePlugin
DllPlugin 和 DllReferencePlugin 是用于将不常变动的第三方库打包成单独的 DLL 文件的插件。通过这种方式，可以减少每次构建时的重复打包，从而提升构建速度。
4. 使用 externals 配置
externals 配置允许你将一些大型库通过 CDN 引入，而不是打包到项目中。这样可以减少构建时间，同时也能减少最终打包文件的体积。
5. 使用 splitChunks 进行代码分割
splitChunks 是 Webpack 4 引入的一个功能，用于将公共代码提取到单独的 chunk 中。通过这种方式，可以减少重复打包，提升构建速度。
6. 使用 terser-webpack-plugin 进行压缩
terser-webpack-plugin 是一个用于压缩 JavaScript 代码的插件。它比 Webpack 默认的压缩工具更高效，可以通过并行处理来提升压缩速度。
7. 减少 resolve 配置中的查找范围
resolve.modules 和 resolve.extensions 是用于配置模块查找路径和文件扩展名的选项。通过减少这些配置中的查找范围，可以减少模块查找时间，从而提升构建速度。
8. 使用 IgnorePlugin 忽略不必要的模块
IgnorePlugin 是用于忽略某些模块的插件。通过忽略一些不必要的模块，可以减少打包体积，从而提升构建速度。