Webpack 是一个强大的前端构建工具，可以将项目中的各种资源打包成一个或多个文件。然而，随着项目规模的增长，Webpack 的构建速度也会变得越来越慢。本文将介绍一些 Webpack 性能优化的方法，帮助你加快构建速度，提高开发效率。
1. 减少文件搜索范围
在 Webpack 中，每个 entry 都需要遍历一遍整个项目来寻找依赖文件。当项目文件数量较多时，这个过程会非常耗时。为了减少搜索范围，可以使用 resolve.alias 配置项来指定模块的别名，或者使用 resolve.modules 配置项来指定模块查找的目录。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
-------- -
------ -
---- ----------------------- -------
--
-------- ---------------- -------
--
--2. 使用缓存
Webpack 4 默认启用了持久性缓存，即使用 cache-loader 或者 hard-source-webpack-plugin 插件可以将构建结果缓存到磁盘中，下次构建时可以直接使用缓存，避免重复构建。这样可以显著减少构建时间。
-- -------------------- ---- -------
-- -----------------
----- ----------------------- - --------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
--
--3. 开启多进程构建
Webpack 默认是单进程构建，这意味着它只能利用一个 CPU 核心来构建项目。为了充分利用多核 CPU，可以使用 parallel-webpack 或者 thread-loader 插件来开启多进程构建。
-- -------------------- ---- -------
-- -----------------
----- -------------------- - ------------------------------------------
----- -- - --------------
-------------- - -
-- ---
-------- -
--- ----------------------
------------ -----------------
---
--
--4. 按需加载
按需加载是指在需要时才加载模块，而不是在页面加载时就将所有模块都加载进来。这样可以减少初始加载时间，提高页面性能。Webpack 提供了多种按需加载的方式，如使用 import() 函数或者 require.ensure() 方法。
-- -------------------- ---- -------
-- --------
------ ------- -
-------- -
------------- -
---------------------------------------- -------- ----- -- -- -
-------------
---
--
--
--5. 使用 Tree Shaking
Tree Shaking 是指将未使用的代码从最终打包的文件中删除，以减少文件大小。Webpack 4 默认开启了 Tree Shaking，但是只能删除 ES6 模块中未使用的代码。如果使用了 CommonJS 模块，需要使用 @babel/preset-env 插件来转换代码。此外，还需要在 package.json 文件中添加 "sideEffects" 字段来告诉 Webpack 哪些模块不应该被 Tree Shaking。
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
--------------------- -
-------- ------
------------ --------
------- --
---
--
--
-- ------------
-
------- -------------
-------------- -
--------
--------
----------------------
--
-- ---
-结语
本文介绍了几种 Webpack 性能优化的方法，包括减少文件搜索范围、使用缓存、开启多进程构建、按需加载和使用 Tree Shaking。希望这些方法能够帮助你加快构建速度，提高开发效率。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da613ea941bf71342568e4