Webpack 已经成为了前端开发中最不可或缺的工具之一。但随着项目规模增大，Webpack 的构建时间也会相应变长，这就要求我们必须思考如何优化打包速度，提高开发效率。
本文将介绍两种优化手段——DllPlugin 和 add-asset-html-webpack-plugin，帮助大家更好地优化自己的 Webpack 构建。
DllPlugin
DllPlugin 是 Webpack 自带的插件，可以将第三方库、框架等单独打包成一个文件，提高打包速度。具体来说，DllPlugin 的基本思路是固定一个不常变化的依赖库的版本，不进行频繁变动和更新，而是将这部分代码提前打包成静态文件（例如：vendor.js），然后在生产环境下直接引用。
接下来我们来了解如何使用 DllPlugin：
创建一个新目录作为单独的配置文件目录，比如setupScripts
再目录里面创建两个文件，分别为webpack.config.dll.js和manifest.json。
具体示例代码如下：
-- -------------------- ---- -------
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
----- ------- - --------- ------------ --------------------
-------------- - -
------ -
------- -------
--
------- -
----- -------------------- ----- --------
--------- ----------------
-------- ----------------
--
-------- -
--- -------------------
----- -------------------- ----- ------- -----------------
----- ----------------
-------- ----------------------- ------
--
-
---- -------------------- ---- -------
-- -------------
-
------- ----------------
---------- -
-------- ---------------------------------------
------------ -----------------------------------------------
------------------- ------------------------------------------------------------
-
-- 在 package.json 中新增配置脚本：
"scripts": {
"dll": "webpack --config webpack.config.dll.js"
},- 运行 npm run dll，即可生成 vendor.dll.js 文件和 manifest.json 文件。
# 注意要在设置好dll.config.js 在根目录下 $ npm run dll
- 引入
AddAssetHtmlPlugin来添加到生成的 HTML 中
-- -------------------- ---- -------
-- ----------------- --- -------
----- ---- - ----------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- ------------------ - -----------------------------------------
-------------- - -
------ -
---- -----------------
--
------- -
--------- --------------------------
----- ----------------------- --------
--
-------- -
--- ---------------------
--- -------------------
------ -------- ------
--------- --------------------
---
--- ----------------------
--------- ---------------------------
---
--- --------------------
--------- ----------------------------------------
----------------- ------
---
--
------------- -
------------- ---------
---------- ---------
------------ -
------- ------
------------------- ---------
-------- --
------------ -
------- -
----- -------------------------
------------ -
----- ----------- - ----------------------------------------------------------------
------ ------------------------------- ------
--
--
--
--
--
--add-asset-html-webpack-plugin
AddAssetHtmlPlugin 是插件，可以在 webpack 构建时自动向生成的 HTML 文件中添加指定的静态文件。在使用 DllPlugin 的时候，我们可以使用 AddAssetHtmlPlugin 将该生成的 vendor.dll.js 添加到 HTML。
使用方法如下：
- 安装 add-asset-html-webpack-plugin
$ yarn add add-asset-html-webpack-plugin
- 在上方的 DllPlugin 步骤中，我们已经生成了vendor.dll.js和manifest.json，需要在 webpack.config.js 中使用该插件。我们只需要在配置文件中添加 AddAssetHtmlPlugin 并指定要引入的 DLL 文件的路径即可。
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, 'dist/vendor.dll.js')
}),这么做可以确保在 Webpack 构建时自动向 HTML 文件中添加静态文件，进而减小构建的体积，提高构建速度。
总结
本文介绍了如何使用 DllPlugin 和 add-asset-html-webpack-plugin 优化 Webpack 构建速度。其中，DllPlugin 可以将第三方库、框架等单独打包成一个文件，提高打包速度；而 add-asset-html-webpack-plugin 可以在构建时自动向生成的 HTML 文件中添加指定的静态文件。这两种优化手段可以帮助我们更好地优化自己的 Webpack 构建，提高开发效率。
希望本文对你有所帮助，如果有任何疑问或建议，欢迎在评论区留言交流讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b41a14add4f0e0ffd0d152