加速前端打包速度 —— 使用 DllPlugin 插件
前言
随着前端技术的不断发展，我们的项目越来越复杂，代码量也越来越大，打包速度成为越来越重要的问题。在这篇文章中，我们将介绍如何使用 DllPlugin 插件来加速前端打包速度。
什么是 DllPlugin 插件？
DllPlugin 插件是 webpack 自带的一个插件，它可以将一些第三方库或者框架单独打包成一个文件，然后在主要的打包过程中，通过引入这个文件来避免重复打包这些库或者框架，从而提高打包速度。
为什么需要使用 DllPlugin 插件？
在一个大型项目中，我们通常会引入很多第三方库或者框架，这些库或者框架的代码量通常都很大，而且它们很少会发生变化。在每次打包的时候，webpack 都会将这些库或者框架重新打包一遍，这样会浪费很多时间。使用 DllPlugin 插件可以将这些库或者框架单独打包成一个文件，然后在主要的打包过程中，通过引入这个文件来避免重复打包这些库或者框架，从而提高打包速度。
如何使用 DllPlugin 插件？
- 创建一个新的 webpack 配置文件
首先，我们需要创建一个新的 webpack 配置文件，用来单独打包第三方库或者框架。在这个配置文件中，我们需要指定 entry 和 output。
entry 表示入口文件，我们需要将需要打包的第三方库或者框架全部列出来，例如：
entry: {
vendor: ['react', 'react-dom', 'lodash']
}output 表示输出文件，我们需要将打包后的文件输出到指定的目录下，例如：
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].dll.js',
library: '[name]_library'
}这里的 [name] 是 entry 中的 key 值，library 表示将打包后的文件暴露给全局变量，方便在主要的打包过程中引入。
- 配置 DllPlugin 插件
在这个新的配置文件中，我们还需要配置 DllPlugin 插件，例如：
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, 'dist/[name]-manifest.json'),
name: '[name]_library'
})
]这里的 path 表示生成的 manifest 文件的存放路径，name 表示打包后的文件的名称。
- 执行打包命令
在完成以上两个步骤之后，我们就可以执行打包命令了。在主要的打包过程中，我们需要通过引入打包后的文件来避免重复打包第三方库或者框架，例如：
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendor-manifest.json')
})
]这里的 context 表示上下文路径，manifest 表示之前打包生成的 manifest 文件。
完整示例代码
-- -------------------- ---- -------
-- ------------------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
------- --------- ------------ ---------
--
------- -
----- ----------------------- --------
--------- ----------------
-------- ----------------
--
-------- -
--- -------------------
----- ----------------------- -----------------------------
----- ----------------
--
-
--
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ----------------------------
-------- ----------
--------- --------------------------------------
--
-
--总结
使用 DllPlugin 插件可以将第三方库或者框架单独打包成一个文件，然后在主要的打包过程中，通过引入这个文件来避免重复打包这些库或者框架，从而提高打包速度。在实际的开发中，我们可以根据项目的实际情况来决定是否使用该插件，从而提高项目的打包速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660f9e47d10417a2220352fd