Webpack 是一个流行的前端构建工具，它可以将多个模块打包成一个或多个文件，让前端开发更加高效。但是，Webpack 的构建速度也是一个常见的问题。在本文中，我们将介绍 10 个优化 Webpack 构建速度的实用方法，帮助你更快地构建你的前端应用程序。
1. 使用缓存
Webpack 有一个缓存机制，可以缓存已经编译过的模块。这意味着当你重新运行构建时，Webpack 可以检查哪些模块已经编译过，从而节省构建时间。要启用缓存，请在配置文件中添加以下代码：
module.exports = {
// ...
cache: true,
// ...
};2. 使用多线程或多进程
Webpack 默认情况下是单线程的，这意味着它只能使用一个 CPU 核心。如果你有多个 CPU 核心，你可以使用多线程或多进程来加速构建。有许多插件可以帮助你实现这一点，例如：
3. 使用 DllPlugin
DllPlugin 是一个 Webpack 插件，它可以将一些不经常变化的代码打包成一个单独的文件，例如第三方库。这样，Webpack 就不需要每次都重新编译这些代码，可以显著提高构建速度。要使用 DllPlugin，请按照以下步骤操作：
创建一个配置文件，例如
webpack.dll.config.js：-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - ----- ------------- ------ - ------- --------- ------------ ---------- -- ------- - ----- ----------------------- -------- --------- ---------------- -------- --------- -- -------- - --- ------------------- ----- --------- ----- ----------------------- ----------------------------- --- -- --在此示例中，我们将
react、react-dom和lodash打包到vendor.dll.js文件中，并生成一个名为vendor.manifest.json的清单文件。运行
webpack --config webpack.dll.config.js命令来构建vendor.dll.js文件和vendor.manifest.json文件。在你的应用程序中，使用
DllReferencePlugin引用vendor.manifest.json文件：-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - -- --- -------- - --- ---------------------------- --------- ------------------------------- ------------------------------ --- -- -- --- --这样，Webpack 就可以使用
vendor.dll.js文件中的代码，而不需要重新编译它们。
4. 使用 HappyPack
HappyPack 是一个 Webpack 插件，它可以将模块的解析和转换过程移动到单独的进程中，以提高构建速度。要使用 HappyPack，请按照以下步骤操作：
安装 HappyPack：
npm install happypack --save-dev
在配置文件中添加 HappyPack 插件：
-- -------------------- ---- ------- ----- --------- - --------------------- ----- -- - -------------- -------------- - - -- --- -------- - --- ----------- --- ----- -------- ----------------- -------- ----------------- --- -- -- --- --在此示例中，我们创建了一个名为
js的 HappyPack 插件，并使用babel-loader作为加载器。threads选项指定了使用多少个进程，这里使用了 CPU 核心数。将原来的
loader替换为happypack/loader：-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- -------- ---- ------------------------- -- -- -- -- --- --这样，Webpack 就会使用 HappyPack 插件来编译代码。
5. 减少文件搜索范围
Webpack 默认会搜索所有的文件，包括 node_modules 目录。但是，这会导致构建速度变慢。你可以通过以下方式减少搜索范围：
使用
resolve.alias将一些常用的模块映射到绝对路径，例如：-- -------------------- ---- ------- -------------- - - -- --- -------- - ------ - ------ ----------------------- ---------------------- ------------ ----------------------- -------------------------- -- -- -- --- --这样，Webpack 就不需要搜索
node_modules目录中的react和react-dom模块了。使用
resolve.extensions将一些常用的文件扩展名映射到空字符串，例如：module.exports = { // ... resolve: { extensions: ['.js', '.jsx', '.json'], }, // ... };这样，Webpack 就不需要搜索所有的文件扩展名了。
使用
resolve.modules将一些常用的模块目录映射到绝对路径，例如：module.exports = { // ... resolve: { modules: [path.resolve(__dirname, 'src'), 'node_modules'], }, // ... };这样，Webpack 就只会搜索
src目录和node_modules目录。
6. 使用 Tree Shaking
Tree Shaking 是一种优化技术，它可以在编译时删除未使用的代码。要使用 Tree Shaking，请按照以下步骤操作：
确保你的代码是 ES6 模块化的。
在配置文件中启用 Tree Shaking：
module.exports = { // ... optimization: { usedExports: true, }, // ... };在此示例中，我们启用了
usedExports选项，它会将未使用的代码标记为不需要导出，从而在编译时删除它们。
7. 使用 Source Map
Source Map 是一种映射文件，它可以将编译后的代码映射回原始代码，方便调试。但是，Source Map 也会增加构建时间。你可以根据需要选择是否使用 Source Map。要使用 Source Map，请在配置文件中添加以下代码：
module.exports = {
// ...
devtool: 'source-map',
// ...
};8. 使用 UglifyJS
UglifyJS 是一个 JavaScript 压缩工具，它可以将代码压缩到最小，并删除未使用的代码。要使用 UglifyJS，请按照以下步骤操作：
安装 UglifyJS：
npm install uglifyjs-webpack-plugin --save-dev
在配置文件中添加 UglifyJS 插件：
-- -------------------- ---- ------- ----- -------------- - ----------------------------------- -------------- - - -- --- -------- - --- ----------------- -- -- --- --在此示例中，我们使用了 UglifyJSPlugin 插件来压缩代码。
9. 使用 CDN
使用 CDN 可以加快静态资源的加载速度，从而提高网站的性能。你可以将一些常用的库文件（例如 jQuery）从 CDN 加载，而不是将它们打包到你的应用程序中。
10. 减少模块数量
最后，你可以尝试减少模块数量，从而减少构建时间。你可以通过以下方式减少模块数量：
- 合并一些小模块成一个大模块。
- 删除未使用的模块。
- 使用一些轻量级的替代品，例如 Lodash 的 Micro 模块。
这些都是可以尝试的方法，但是请注意不要过度优化，也不要牺牲代码质量和可维护性。
结论
优化 Webpack 构建速度是一个重要的任务，它可以提高前端开发的效率和网站的性能。在本文中，我们介绍了 10 个实用的优化方法，包括使用缓存、使用多线程或多进程、使用 DllPlugin、使用 HappyPack、减少文件搜索范围、使用 Tree Shaking、使用 Source Map、使用 UglifyJS、使用 CDN 和减少模块数量。希望这些方法能够帮助你更快地构建你的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675ddd07e1dcc5c0fa421aac