前言
在前端开发中，Webpack 是一个非常重要的工具。它可以将多个模块打包成一个或多个 bundle，然后在浏览器中运行。但是，在项目庞大的情况下，Webpack 的构建速度会变得很慢，这会严重影响开发效率。在这种情况下，我们可以使用 DllPlugin 来加快构建速度。
什么是 DllPlugin
DllPlugin 是 Webpack 3 中提供的一个插件，它可以将一些稳定的第三方库打包成一个单独的动态链接库（dll）。这个动态链接库可以被多个 entry 共享，从而加快构建速度。
如何使用 DllPlugin
1. 安装依赖
首先，我们需要安装 webpack 和 webpack-cli：
npm install webpack webpack-cli --save-dev
2. 创建一个配置文件
在项目根目录下，创建一个名为 webpack.dll.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
-- ---------
------- -----------
------- ----------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ------------ -- ------ ---- ----
--
-------- -
--- -------------------
----- ------------- -- ------ ------- ----
----- ----------------------- ----------------------------
--
-
--3. 打包动态链接库
在命令行中执行以下命令：
npx webpack --config webpack.dll.config.js
执行成功后，会在 dist 目录下生成 jquery.dll.js、lodash.dll.js 和 jquery.manifest.json、lodash.manifest.json 两个文件。
4. 在项目中使用动态链接库
在项目的 webpack 配置文件中添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
---- ----------------
--
------- -
--------- ----------------
----- ----------------------- -------
--
-------- -
--- ----------------------------
--------- --------------------------------------
---
--- ----------------------------
--------- --------------------------------------
--
-
--然后，在项目的入口文件中引入第三方库：
import $ from 'jquery';
import _ from 'lodash';
$('body').html(_.join(['Hello', 'webpack'], ' '));最后，在命令行中执行以下命令：
npx webpack
执行成功后，会在 dist 目录下生成 app.bundle.js 文件。
总结
使用 DllPlugin 可以将一些稳定的第三方库打包成一个单独的动态链接库，从而加快构建速度。在使用时，需要注意配置文件和项目的 webpack 配置文件中的设置。希望本文能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655c7822d2f5e1655d69a294