Webpack 是一个前端领域使用最广泛的打包工具，可以将多个 JS 和 CSS 文件打包成一个或多个 bundle。然而，Webpack 的打包速度较慢，特别是当我们使用了大量第三方库时。DLLPlugin 是 Webpack 的一个插件，通过把一组库提前进行编译打包，使得每一次重新构建时只需要编译自己的代码，而不用再去编译第三方库，从而大大提高了构建速度。
本文将介绍 Webpack DLLPlugin 的具体用法，并提供一个实例。
安装
首先，需要全局安装 Webpack：
$ npm install webpack -g
然后，在项目中安装 webpack 和 webpack-cli：
$ npm install webpack webpack-cli --save-dev
DLLPlugin 的配置
下面是 DLLPlugin 的简单配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
-------- --------- ------------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- -----------------------------
---
--
--- mode：模式，production 和 development 两种模式，这里选择了 production。
- entry：入口，这里只有一个 entry，包含了两个库：React 和 React-DOM，它们会被打包成 library.dll.js 文件。
- output：输出文件，文件名为 entry 的名字 library.dll.js。
- plugins：插件，这里使用了 DllPlugin，它会生成一个 manifest 文件，用于在主配置文件中使用。
使用 DLLPlugin
下面是使用 DLLPlugin 的简单配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ----------------------------
--------- ------------------------------- -------------------------------
---
--- -------------------
--------- -------------------
---
--
--- mode：模式，production 和 development 两种模式，这里选择了 production。
- entry：入口，这里只有一个 entry，即项目的入口文件 index.js。
- output：输出文件，文件名为 entry 的名字 app.js。
- plugins：插件，这里使用了 DllReferencePlugin，它会引用 library.manifest.json 文件，以便在编译 app.js 文件时不必再编译 React 和 React-DOM。
示例代码
webpack.config.dll.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- -------------
------ -
-------- --------- -------------
--
------- -
--------- ----------------
----- ----------------------- --------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- ----------------------- -----------------------------
---
--
--webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ----------------------------
--------- ------------------------------- -------------------------------
---
--- -------------------
--------- -------------------
---
--
--package.json
-- -------------------- ---- -------
-
------- -------------------
---------- -
------------ -------- -------- -----------------------
-------- -------- -------- ------------------
--
--------------- -
-------- ----------
------------ ---------
--
------------------ -
---------------------- ---------
---------- ----------
-------------- --------
-
-src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Hello, World!</div>, document.getElementById('root'));src/index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- --- ------------ ------- ------ ---- ---------------- ------- -------------------------------- ------- ------------------------ ------- -------
运行
打开终端，运行以下命令：
$ npm run build:dll $ npm run build
打开 dist 目录下的 index.html，可以看到页面上已经正确渲染出了 Hello, World!。
结论
通过使用 DLLPlugin 插件，我们可以提高 Webpack 构建的速度，尤其是在使用大量的第三方库时。此外，我们还应该尽可能地减少构建需要处理的模块，避免无用代码对构建速度的影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6734fb0c0bc820c5824c0b40