Webpack 是前端开发过程中常用的打包工具，但是当项目越来越大时，打包会变得越来越慢，影响开发效率与用户体验。所以，对 Webpack 进行优化是非常有必要的。
优化目标
优化的目标是减少打包时间、提升应用性能，更好地满足用户需求。
分析与优化
初级优化
Loader 和 Plugin 的使用
尽可能使用官方推荐的 Loader 和 Plugin，并移除无用的 Loader 和 Plugin。
压缩代码
通过使用 UglifyjsPlugin 和 OptimizeCSSAssetsPlugin 来压缩代码。
异步加载代码
通过使用动态导入（Dynamic import）来异步加载代码，减少主包大小。
缓存
在开发期间设置缓存，利用缓存减少构建时间。
开启 Tree Shaking
使用 ES6 模块语法和开启 Tree Shaking 可以消除应用中未被使用的代码。
进阶优化
使用 HardSourceWebpackPlugin
使用 HardSourceWebpackPlugin 可以缓存中间产物，加快二次构建速度。
Scope Hoisting
使用 Scope Hoisting 可以减少应用体积。
使用 DllPlugin 和 DllReferencePlugin
使用 DllPlugin 和 DllReferencePlugin 可以减少依赖的重复打包，提高构建速度。
使用 HappyPack
使用 HappyPack 可以使用多个线程来并行处理 Loader 解析和文件转换等耗时操作。
代码示例
下面是一个 webpack.config.js 的优化后的节点。
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- -------------------- - ----------------------------------
----- ----------------------- - ---------------------------------------------
----- -------------- - ----------------------------------
----- ----------------------- - -------------------------------------
----- - ------------------ - - ------------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- ------------------
--
------------- -
---------- -
--- -----------------
--- -------------------------
--
------------ -
------- ------
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
--------- ----
------------------- ----
-
-
-
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
--
-
----- --------
-------- ---------------
---- ------------------------
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- ----------------------
--------- -------------------
---
--- --------------------------
--- --------------------
--------- ----------------------- ------- ----------------
--
-
-总结
优化 Webpack 可以提高项目的开发效率和用户体验，使用 Webpack 自带的排除和 Tree Shaking 能够有效减少不必要的代码，通过一系列插件和工具可以保证优化只局限在构建环节，不受干扰，同时也能加快应用的速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517c86395b1f8cacdfef9a6