Webpack 是目前前端领域中最流行的构建工具之一，它能够将多个 JavaScript 文件打包成一个文件，从而减少网络请求次数，提高网站性能。但是在项目庞大时，Webpack 构建速度变得缓慢，特别是在每次启动时进行全部打包，开发效率大幅降低。针对这个问题，我们可以使用 Webpack 的 DllPlugin 插件进行打包优化。
DllPlugin 插件的作用
DllPlugin 插件可以将一些不常变化的代码打包成静态文件，从而减少后续打包时间，提高构建效率。具体而言，该插件实现了两个重要的用途：
打包静态库：通过 DllPlugin 插件打包出来的静态库可以在后续的开发和生产中直接引用，从而减少重复打包的时间和资源。
提高构建效率：D.L.L（dynamic link library）编译是一个耗费时间的过程，使用 DllPlugin 插件打包静态文件后，可以减少每次编译的时间，从而提高构建速度。
使用 DllPlugin
下面我们将通过一个简单的示例来演示如何使用 DllPlugin。
创建新的目录
dll-demo并执行npm init -y初始化项目。安装 webpack 和 webpack-cli。
npm install webpack webpack-cli --save-dev
创建两个空白的文件，webpack.dll.js 和 webpack.config.js。
在 webpack.dll.js 中添加以下示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
----- --------------
------ -
---- ------- ------------- -------
--
------- -
----- ----------------------- -------
--------- -------------------------
-------- ----------------------
--
-------- -
--- -------------------
----- -------------------- ------ ------------------------
----- ---------------------
--
--
--该示例代码的作用是将 Vue.js 相关的模块打包成一个静态库。
- 在 package.json 中添加以下脚本。
"scripts": {
"dll": "webpack --config webpack.dll.js",
"dev": "webpack-dev-server --open --config webpack.config.js"
},运行
npm run dll命令进行 DllPlugin 打包。根据 DllPlugin 打包产生的
.dll.js文件，在 webpack.config.js 中添加以下内容。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -----------
----- ----------------------- ----- --------
--
-------- -
--- ----------------------------
--------- -----------------------------------
---
--
--- 运行
npm run dev命令启动开发服务器。
此时，你将发现 Webpack 构建速度得到了明显提升，而且每一次修改代码也只需重新打包 index.js 文件，而不需要重新打包静态库。
总结
DllPlugin 插件可以将一些不常变化的代码打包成静态文件，从而减少后续打包时间，提高构建效率。在大型 Web 应用程序中使用 DllPlugin，可以大幅提高编译速度，同时还能使代码更加容易维护和更新。通过以上实例，我们可以看到 DllPlugin 的使用方法更加简单和轻松。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f271d48841e9894ed6cca