Webpack 是目前前端工程化中最常用的构建工具之一，它可以将多个 JavaScript 文件打包成一个或多个文件，同时支持处理 CSS、图片等静态资源。然而，Webpack 的构建速度可能会比较慢，尤其是在项目规模较大的情况下。本文将介绍一些提高 Webpack 构建效率的方法。
1. 使用多线程
Webpack 在默认情况下是单线程构建的，这意味着在构建大型项目时会相当耗时。为了提高构建效率，我们可以使用多线程构建。具体来说，我们可以使用 thread-loader 或 happypack 插件来实现多线程构建。
1.1 使用 thread-loader
thread-loader 可以将耗时的 loader 放在 worker 池中运行，从而实现多线程构建。使用 thread-loader 可以简单地在 Webpack 配置文件中将需要多线程处理的 loader 用 thread-loader 包装。
// www.javascriptcn.com code example
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'thread-loader',
options: {
workers: 3,
},
},
'babel-loader',
],
},
],
},
};上面的配置将使用 3 个 worker 运行 babel-loader。
1.2 使用 happypack
happypack 是另一个实现多线程构建的插件，它可以将 loader 转化为插件，并使用多个 worker 运行。使用 happypack 需要先将需要多线程处理的 loader 转化为插件。例如，将 babel-loader 转化为 happypack/loader。
// www.javascriptcn.com code example
const HappyPack = require('happypack');
const os = require('os');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: 'happypack/loader?id=babel',
},
],
},
plugins: [
new HappyPack({
id: 'babel',
loaders: ['babel-loader'],
threads: os.cpus().length,
}),
],
};上面的配置将使用 CPU 核心数个 worker 运行 babel-loader。
2. 使用缓存
Webpack 的缓存机制可以避免重复编译相同的模块，从而提高构建效率。Webpack 4 默认开启了缓存，但你也可以手动配置缓存选项。具体来说，可以在 Webpack 配置文件中添加 cache 选项。
module.exports = {
cache: {
type: 'filesystem',
},
// ...
};上面的配置将使用文件系统作为缓存存储方式。除了文件系统，Webpack 还支持内存缓存等方式。使用缓存可以大大减少重复编译的时间，提高构建效率。
3. 使用 DllPlugin 和 DllReferencePlugin
DllPlugin 和 DllReferencePlugin 是 Webpack 提供的两个插件，它们可以将一些不经常变化的模块打包成单独的文件，从而避免每次都重新打包这些模块。具体来说，DllPlugin 将创建一个动态链接库，其中包含了需要预编译的模块，而 DllReferencePlugin 则将这个动态链接库引入到主要的 Webpack 配置中。
首先，我们需要创建一个 Webpack 配置文件，用于打包动态链接库。
// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
react: ['react', 'react-dom'],
lodash: ['lodash'],
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, 'dll'),
library: '[name]_dll',
},
plugins: [
new webpack.DllPlugin({
name: '[name]_dll',
path: path.resolve(__dirname, 'dll/[name].manifest.json'),
}),
],
};上面的配置将会打包 react 和 lodash 两个模块，并生成 react.dll.js 和 lodash.dll.js 两个文件。同时，还会生成 react.manifest.json 和 lodash.manifest.json 两个 manifest 文件，用于在主要的 Webpack 配置中引入。
接下来，我们需要在主要的 Webpack 配置文件中引入这些动态链接库。
// www.javascriptcn.com code example
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/react.manifest.json'),
}),
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/lodash.manifest.json'),
}),
],
};上面的配置中，我们使用了 DllReferencePlugin 插件来引入 react 和 lodash 两个动态链接库。这样，在每次构建时，Webpack 将不会重新打包这些模块，从而提高构建效率。
结语
本文介绍了一些提高 Webpack 构建效率的方法，包括使用多线程、使用缓存和使用 DllPlugin 和 DllReferencePlugin。这些方法都可以在实际项目中使用，从而提高构建效率，减少开发时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8d205a941bf7134f6c33c