前端开发中随着项目规模的不断扩大，打包构建的时间越来越长，这时候需要使用一些工具来进行优化。其中之一就是 webpack 中的 DllPlugin 和 DllReferencePlugin。这两个插件能够大大减少打包构建的时间，提高了开发效率。本文将说明 webpack 和 vue 如何使用 DllPlugin 和 DllReferencePlugin 进行性能优化。
DllPlugin 和 DllReferencePlugin 是什么？
DllPlugin 和 DllReferencePlugin 是 webpack 中的两个插件。它们用于将一些常用的、不常变化的模块提前打包出来，形成一个独立的动态链接库（Dynamic-link Library，DLL）。这样，在每次打包构建时，webpack 只需要对每个模块进行一次编译，而不用对所有模块进行编译，从而大大减少了打包构建的时间。
具体地说，DllPlugin 用于打包生成一个 DLL 文件，该文件包含了一些常用但不常变化的模块，比如 vue、react、jquery 等。DllReferencePlugin 则用于在 webpack.config.js 中引入该 DLL 文件。
如何利用 DllPlugin 和 DllReferencePlugin 进行性能优化？
1. 配置 webpack.config.dll.js
首先，需要创建一个 webpack.config.dll.js 的配置文件，用于打包生成 DLL 文件。在该文件中，需要对 entry、output、plugins 进行配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- ------- ------------- -------
--
------- -
----- -------------------- -------------
--------- ----------------
-------- ---------------
--
-------- -
--- -------------------
----- ----------------
----- -------------------- ------------ --------------
--
-
--上述代码中，entry 中配置了所需要打包的模块，这里以 vue、vue-router、vuex 为例。output 中配置了 DLL 文件的输出路径和文件名，这里输出到 public 目录下。plugins 中配置了 DllPlugin 插件，其中的 name 属性和 output 中的 library 属性必须相同， path 属性则是配置生成的 manifest 文件的输出路径和文件名。
2. 运行 webpack.config.dll.js
在项目根目录下运行以下命令，生成 DLL 文件和 manifest.json 文件。
$ webpack --config webpack.config.dll.js
执行完该命令后，会在 public 目录下生成 vendor.dll.js 和 vendor.json 两个文件。
3. 引入 DLL 文件
在 webpack.config.js 文件中引入 vendor.dll.js 文件，并使用 DllReferencePlugin 插件进行配置。这个步骤需要在一开始的 plugins 中添加一个 new webpack.DllReferencePlugin({...}) 对象。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- ---------------
--
------- -
----- ----------------------- -----------
--------- ------------
----------- ---
--
-------- -
--- ----------------------------
-------- ----------
--------- --------------------------------
--
-
--其中 context 属性需要和 manifest 文件中的 directory 属性相同。此时，webpack 只会编译 entry 中的 app 模块，不会对 vendor 模块进行编译。webpack 在打包构建时，会将 vendor 模块从 DLL 文件中引入到 app 模块中一起打包。这样，build 的时候就可以从旧的代码构建出新的代码。
总结
DllPlugin 和 DllReferencePlugin 可以大大提高 webpack 的打包效率，减少构建时间。在使用前需要配置 webpack.config.dll.js 文件，将需要打包的模块写入 entry 中，然后运行打包命令 $ webpack --config webpack.config.dll.js ，生成 DLL 文件和 manifest.json 文件。在 webpack.config.js 文件中引入 vendor.dll.js 文件，使用 DllReferencePlugin 插件进行配置。最后，重新运行打包命令 $ webpack 进行构建。
本文介绍了 webpack 和 vue 如何利用 DllPlugin 和 DllReferencePlugin 进行性能优化，分享了具体的代码和示例，希望能给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6594f8d6eb4cecbf2d93de30