在现代化的 Web 开发中，使用前端框架和库已变成了一种不可避免的趋势。在使用大型框架和库的同时，前端开发人员面临一个共同的问题：打包时间变长、打包体积过大。Webpack DllPlugin 可以帮助解决这个问题，本文将介绍 Webpack DllPlugin 原理、应用场景和使用方法。
Webpack DllPlugin 的原理
Webpack DllPlugin 是将不变的部分以 DLL 的形式单独打包，这样做的好处是当你在进行代码打包时，只需要打包你的代码，而不用再打包第三方库和框架等等，从而大大缩短了打包时间，同时也会减小打包后代码的体积。
Webpack DllPlugin 的具体实现步骤如下：
- 通过 Webpack 配置选项中的 entry 属性，将第三方库和框架等不变的部分初次打包成一个独立的文件（如 vendor.dll.js）。
- 然后再通过 Webpack 配置选项中的 plugins ，将这个 vendor.dll.js 文件映射到 index.html。
- 在使用时只需要在自己的 Webpack 配置文件中引入这个 vendor.dll.js 文件即可。
Webpack DllPlugin 的应用场景
Webpack DllPlugin 的应用场景主要是在以下情况下：
- 当我们的项目使用了一些第三方库，比如 jQuery、React、Redux 等等，打包后这些库的代码都被打包进了同一个文件中，使得这个文件变得十分庞大，从而影响到了加载时间和用户体验。而通过使用 DllPlugin，我们首先将这些库单独打包成 vendor.dll.js 文件，这个文件在项目中的所有页面上都会被使用。这就使得用户第一次访问页面时就只需要加载这个 vendor.dll.js 文件即可，这将大大减少了页面加载时间。
- 当我们需要将打包后的代码部署到 CDN 上时，我们可以将 vendor.dll.js 文件上传到 CDN 上，这样可以节省一定的服务器流量，同时也会减小压缩后的代码体积。
Webpack DllPlugin 的使用方法
下面我们来看一下 Webpack DllPlugin 的具体使用方法：
- 在项目根目录下创建一个新的文件夹，命名为 dll。
- 在 dll 文件夹下创建一个新的名为 webpack.dll.config.js 的 Webpack 配置文件。这个文件的内容大致如下：
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- ---------- ---------
--
------- -
----- ----------------------- ----------
--------- ----------------
-------- ----------------
--
-------- -
--- -------------------
----- ----------------------- -------------------------------
-- --------------
-- ---- ------- ---------------- -----
-------- ----------
-- ----------------------------------------------------
-- -----------------------
----- ----------------
-- --------------
--
-
--这段代码是一个简单的 Webpack 配置文件，我们将需要单独打包的第三方库和框架等放在了 entry 中，通过 output 和 plugins 分别设置输出文件名、输出路径和插件，最终会在 dll 文件夹中生成一个名为 vendor.dll.js 的文件和一个名为 vendor-manifest.json 的 manifest 文件。
- 在项目的 Webpack 配置文件中，我们需要添加以下代码：
--- ----------------------------
--------- --------------------------------------
--这行代码是告诉 Webpack 我们已经将 vendor.dll.js 文件生成，现在需要使用它来加快代码的打包速度。
- 当我们要在页面中使用 vendor.dll.js 文件时，我们需要在 index.html 文件中插入以下代码：
------- -----------------------------------
这个代码会将 vendor.dll.js 文件引入到页面中。
- 最后，在我们的 Webpack 打包命令中，需要添加以下代码：
---------- - ------------ -------- -------- ----------------------- -------- --------- -
这里表示先执行 build:dll 任务，生成 dll 文件，然后再执行 build 任务，打包我们的代码。
Webpack DllPlugin 的总结
Webpack DllPlugin 可以帮助我们将不变的部分单独打包成 DLL 文件，从而加快代码的打包速度，减小打包后代码的体积。它适用于我们的项目使用了大量第三方库和框架等。希望通过本文的介绍，大家能够掌握 Webpack DllPlugin 的使用方法，并在实际开发中加以应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6540209b7d4982a6eb9a9e01