在前端开发中，我们经常会使用一些常用的库，比如 jQuery 和 Bootstrap。这些库通常被作为依赖引入我们的项目中。但是，随着项目的规模变得越来越大，每次重新打包时，这些库都需要被重新处理，会花费大量的时间。为了解决这个问题，我们可以将这些库打包成 Dll 文件，这样每次打包时就可以直接使用 Dll 文件而不需要重新处理这些库了。
Webpack Dll
Webpack Dll 是 Webpack 的一种打包方式，它可以将一些库单独打包成 Dll 文件，这些 Dll 文件在使用时不需要再被重新处理，从而提高打包速度。Webpack Dll 的实现原理是将依赖库单独打包成一个动态链接库，编译时只需要链接这个动态链接库就可以了，不需要逐个编译所有依赖库，这就大大缩短了编译时间。
打包步骤
接下来，我们来介绍一下如何使用 Webpack 打包 jQuery 和 Bootstrap 成 Dll 文件。
- 创建一个文件夹，命名为 vendor，并在其中创建一个 package.json 文件，用于记录我们要打包的依赖项：
-- -------------------- ---- -------
-
------- ---------
---------- --------
-------------- ------- -----------
--------------- -
--------- ---------
------------ --------
-
-- 安装依赖：
npm install
- 安装 Webpack 和 Webpack Dll 插件：
npm install webpack webpack-dev-server webpack-cli webpack-manifest-plugin add-asset-html-webpack-plugin cross-env --save-dev
- 创建一个 webpack.dll.config.js 文件，用于打包 jQuery 和 Bootstrap：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------- - ----------------------------------
-------------- - -
------ -
------- ---------- ------------
--
------- -
----- ----------------------- --------
--------- ----------------
-------- ------------
--
-------- -
--- -------------------
----- -------------
----- -------------------- -----------------------
--
-
--在这个配置文件中，我们指定了要打包的两个库 jQuery 和 Bootstrap，将其打包成一个名为 vendor 的 Dll 文件，打包输出路径为 dist 文件夹，打包后的文件名为 vendor.dll.js，打包后的库名称为 vendor_lib。
- 运行打包命令：
webpack --config webpack.dll.config.js
这个命令将会生成一个 vendor.dll.js 文件和 vendor-manifest.json 文件。
- 在我们的项目中引入打包后的 Dll 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ----------- ------- ------ ------- ---------------------------------- ------- ------------------------ ------- -------
- 在项目中使用打包后的库：
import $ from 'jquery'; import 'bootstrap';
总结
通过将常用的库打包成 Dll 文件，我们可以大大缩短项目的打包时间。上面介绍的是如何使用 Webpack 打包 jQuery 和 Bootstrap 成 Dll 文件，但是这个方法同样适用于其他常用的库。我们可以将常用的库打包成 Dll 文件，提高项目的编译速度，这对于大型项目尤为重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd1e7b95b1f8cacdcbcdf1