前言
Webpack 是前端开发中常用的打包工具，它可以将各个模块打包成一个或多个文件，方便我们将前端项目部署到服务器上。但是，Webpack 打包过程中需要分析每个模块的依赖关系，这个过程比较消耗时间。在大型项目中，打包时间可能会成为影响开发效率的瓶颈。为了解决这个问题，Webpack 提供了 DllPlugin 插件，可以将一些不经常变化的模块先打包进一个单独的文件，从而减少打包时间。本文将详细介绍 Webpack DllPlugin 插件的使用方法。
DllPlugin 是什么？
DllPlugin 是 Webpack 的插件之一，主要作用是将一些不经常变化的代码打包成一个单独的文件，并在打包应用时，从该文件中读取代码，并将其直接插入到打包文件中。因为这些代码很少改变，所以可以不用每次都重新打包，节省出大量的时间。
DllPlugin 的使用方法
1.安装依赖
npm install webpack webpack-dev-server webpack-cli webpack-manifest-plugin webpack-merge dll-reference-plugin clean-webpack-plugin -D
- 编写 webpack.config.dll.js 文件
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
----- -------------------- - -------------------------------
----- ----------- - -------
-------------- - -
------ -
-------- -
------
-------
-------------
--------
------------
-
--
------- -
----- ----------------------- ----------
--------- ----------------
-------- ---------------
--
-------- -
--- ---------------------
--- -----------
----- ----------------
----- ----------------------- ---------------------
--
-
-上述代码首先定义了入口文件为我们常用的库，包括 Vue、Vuex、Vue-router、Axios、Element-ui 等。将这些模块打包到 library.dll.js 文件中，并在这些模块中每个模块都使用其 hash 作为插件生成的变量名。同时，将打包后的模块信息写入到 library.json 文件中。
- 执行打包命令
执行下述命令打包文件：
webpack --config webpack.config.dll.js
执行完后，会在我们的项目根目录下新建一个 dll 的文件夹，其中会生成 library.dll.js 和 library.json 文件。这些文件就是我们需要生成的 DLL 文件。
- 编写 webpack.config.js 文件
编辑 webpack.config.js 文件，增加以下配置：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
----- -------------------- - -------------------------------
----- -------------------- - -------
-------------- - -
-----
-------- -
--- ---------------------
--- --------------------
--------- ------------------------------- -----------------------
--
-
-- 正常打包
执行正常的打包命令，可以观察到，打包已经不会再把常用的库文件进行打包了，而是直接引用库文件对应的 DLL 文件中的代码。
总结
使用 DLLPlugin 插件可以有效减少 Webpack 打包时间，提高前端开发效率，在大型项目中尤其应该去考虑该插件的使用。记得需要定期更新自己的 DLL 文件，特别是在项目中引入新的库或者版本更新时。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d53e7bb5eee0b525d187e6