#Webpack 性能优化方案总结
Webpack 是前端开发中常用的打包工具，能够将各种类型的文件打包成最终的资源文件。但是随着项目规模增大，webpack 打包速度也会变得越来越慢，因此需要对其进行性能优化。
本文将从以下几个方面进行总结：
- 合理使用 plugins
- 引入 DllPlugin
- 代码优化
##1. 合理使用 plugins
Webpack 自带了很多 plugins，例如 UglifyPlugin、OptimizeCSSAssetsPlugin，这些 plugins 能够帮助我们进行代码压缩和优化，但是过多的使用会影响打包速度。
因此，我们应该考虑使用必需的 plugins，例如：HtmlWebpackPlugin、ImageMinPlugin 等。同时，我们不应该忽略 webpack 自带的一些优化项。
例如 optimization.splitChunks 可以将代码分割成多个 chunks，能够提高并行加载数量，也能够利用浏览器缓存。”
##2. 引入 DllPlugin
DllPlugin 是一个动态链接库插件，通过将第三方库进行分离。可以减少项目打包时需要编译的代码量，降低编译时间。能够极大地提升项目的打包速度。
DllPlugin 的原理是将一些稳定的第三方库打包成一个 bundle 文件，当代码发生变化时，DllPlugin 可以只打包变化的部分，其他部分不变，这样就能快速生成新的 bundle 文件，从而减少打包时间。
步骤：
- 将第三方库进行打包
- 添加 DllReferencePlugin
- 在 webpack 配置文件中配置 DllPlugin
示例代码：
第一步-打包第三方库
webpack.dll.config.js 文件
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
------ --------- -------------
---- ------- -------------
--
------- -
----- -------------------- -------
--------- ----------------
-------- --------
--
-------- -
--- -------------------
----- -------------------- ------ ------------------------
----- --------
--
-
--执行 webpack --config webpack.dll.config.js 命令进行打包
第二步-添加 DllReferencePlugin
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- - ------------------ - - --------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- --------------------------
----- ----------------------- ---------
--
-------- -
--- ---------------------
--- ----------------------------
--------- -------------------- --------------------------------------
--
-
--第三步-在 webpack 配置文件中配置 DllPlugin
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- --------------------------
----- ----------------------- ---------
--
-------- -
--- -------------------
--------- ------------------
---
--- ----------------------------
--------- ------------------------------------------------
--
-
--##3. 代码优化
代码的优化能够使 webpack 在编译时消耗更少的时间，提升打包速度。主要优化方法如下：
###减少模块查找时间
Webpack 在编译时需要查找 module 的路径，通常情况下每个 module 都有一个路径，如果 module 的路径过长或者过深，查找时间就会变长。
解决方法：
- 使用绝对路径
- 配置 module 的 alias
- 配置 extensions，减少文件查找时间
###使用 exclude 和 include 排除或包含需要打包的文件
exclude 和 include 是 Webpack 打包时非常常用的参数，使用这两个参数可以提高打包效率。exclude 可以排除不需要打包的文件或文件夹，提高编译速度。include 可以只包含需要打包的文件或文件夹，也能够提高编译速度。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
-
-
-
-- ---
--###使用 mini-css-extract-plugin 分离 css
将 css 和 js 分开打包能够减小打包后的文件大小，从而减少加载时间。mini-css-extract-plugin 可以将 CSS 代码提取到一个单独的文件中，从而提高打包速度。
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------- -------------
-------------- ----------
--
-
-- ---
--总结
Webpack 是前端开发中必不可少的工具，但随着项目变得越来越大，Webpack 打包速度的问题也愈加凸显。所以需要定期检查和优化 Webpack 的性能，从而减少编译时间，提高开发效率。
在优化 Webpack 性能时，可以通过合理使用 plugins、引入 DllPlugin 和代码优化等方式来提高打包速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64717e76968c7c53b0f5b463