Webpack 是一款强大的打包工具，但是在项目变得越来越大的时候，Webpack 打包的速度也会变得越来越慢。为了提高 Webpack 的打包速度，我们需要进行一些优化配置。本文将介绍几种 Webpack 优化配置的实战经验。
1. 使用 HappyPack
HappyPack 是一个多线程加速工具，可以将 Webpack 的模块解析和文件压缩等操作分配到多个子进程中进行处理，从而提高打包速度。使用 HappyPack 需要安装 happypack 和 happypack-loader。
以下是使用 HappyPack 的示例代码：
-- -------------------- ---- -------
----- --------- - ---------------------
----- -- - --------------
----- --------------- - ---------------------- ----- ---------------- ---
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -------------------------
--
--
--
-------- -
--- -----------
--- -----
----------- ----------------
-------- -----------------
---
--
--2. 使用缓存
Webpack 打包的过程中会生成大量的中间文件，这些文件可以被缓存起来，以便下次打包时可以直接使用缓存中的文件，避免重复打包。使用缓存需要安装 cache-loader。
以下是使用缓存的示例代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------- ----------------
--
--
--
--3. 使用 DllPlugin
DllPlugin 可以将一些不会频繁更新的模块提前打包成一个单独的文件，并在开发过程中直接引用这个文件，从而提高打包速度。使用 DllPlugin 需要安装 webpack 和 webpack-cli。
以下是使用 DllPlugin 的示例代码：
-- -------------------- ---- -------
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------- --------- ------------ ----------
--
------- -
----- ----------------------- -------
--------- ----------------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- ----------------------------
---
--
--
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- --------------
------ -
----- -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- ----------------------------
--------- --------------------------------------
---
--
--4. 使用 Tree Shaking
Tree Shaking 可以通过静态分析的方式，去除无用代码，从而减小打包文件的体积。使用 Tree Shaking 需要安装 uglifyjs-webpack-plugin 和 webpack-deep-scope-plugin。
以下是使用 Tree Shaking 的示例代码：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
----- - ------------------------------ - - ---------------------------------------------
-------------- - -
----- -------------
------------- -
---------- -
--- ----------------
-------------- -
--------- -
--------- ------
------------- -----
--
------- -
--------- ------
--
--
---
--
--
-------- -
--- ---------------------------------
--
--以上是几种 Webpack 优化配置的实战经验，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3a439a941bf71346f3287
