前言
在前端开发中，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
