Webpack 是现代前端开发中必不可少的构建工具，它可以将多个源文件打包成一个文件，从而减少 HTTP 请求和网络负载，提高网站性能。但是，Webpack 打包速度较慢，会影响开发效率。为了解决这个问题，我们需要掌握一些优化技巧。
1. 使用 Tree Shaking
Tree Shaking 是一种只将代码中用到的部分打进包里的技术，可以有效减小打包后的文件大小。Webpack 只有在 mode 为 production 的情况下自动开启 Tree Shaking 功能，需要手动配置开启 development 模式下的 Tree Shaking。
// webpack.config.js
module.exports = {
mode: 'development',
optimization: {
usedExports: true,
sideEffects: true,
},
};这里需要注意的是，如果你的代码中包含 side effect，那么 Tree Shaking 会将这部分代码删除，可能会导致应用出现问题。所以我们需要在 package.json 中配置 "sideEffects": false，将不应该删除的代码标记出来，让 Tree Shaking 不要将这些代码删除。
-- -------------------- ---- -------
-- ------------
-
------- ---------
-------------- -
--------
---------
---------
---------
---------
--------
--------
---------
--------
--------
---------
--------
--------
---------
----------
--------
--------
--------
---------
--------
--------
--------
--------
-
-2. 使用 HappyPack
Webpack 默认情况下只能使用一个 CPU 核心进行打包，这样会导致打包速度较慢。HappyPack 可以将任务分解给多个子进程去并发执行，从而提高打包速度。
-- -------------------- ---- -------
-- -----------------
----- --------- - ---------------------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -------------------
--
--
--
-------- -
--- -----------
-------- - -------------- --
---
--
--3. 使用 DllPlugin
DllPlugin 可以将第三方库打成一个独立的库文件，不需要每次打包时都重新构建，从而提高打包速度。
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
-------------- - -
-------- -
--- -------------------
----- -------------
----- ----------------------- ---------------------
-------- ----------
---
--
--在使用 DllPlugin 时，需要将第三方库和业务代码分别打包，然后在业务代码中引入第三方库。
4. 开启多个进程并行构建
在高性能的机器上，可以通过开启多个进程进行并行构建，从而提高构建速度。
// webpack.config.js
module.exports = {
parallelism: 4,
};5. 使用缓存
使用缓存可以避免重复编译，提高编译速度。Webpack 默认使用文件作为缓存，也可以使用其他类型的缓存。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
----- -------------
------------------ -
------- -------------
--
--
--总结
以上就是 Webpack 构建优化技巧的总结，我们可以使用 Tree Shaking、HappyPack、DllPlugin、多进程并行构建和缓存等技术来提高打包速度。通过使用这些技巧，我们可以让 Webpack 的打包速度再提升 50%，从而提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647076d0968c7c53b0e97154