前言
在现代的前端项目中，通常通过模块化的方式来组织代码，使得项目代码更加易于维护和扩展。而在模块化的开发过程中，我们通常会使用各种第三方库，这些库可能比较大，会增加页面的加载时间。为了避免这种情况，我们通常会将这些第三方库打包在一起，成为一个 vendor 文件，让其在页面加载时只需要加载一次，提高页面的加载速度。
但是，我们在前端项目开发过程中，经常遇到只需要加载部分第三方库的情况，比如只需要用到 jQuery 的某些功能，但是由于各种原因，我们不得不将 jQuery 打包到 vendor 文件中。这就会使得 vendor 文件过大，引起不必要的网络流量和时间浪费。
dynamic-vendor-webpack-plugin 就是为了解决这个问题而生的，它可以帮助我们根据需要将第三方库打包成一个小巧的 vendor 文件。
安装
使用 NPM 进行安装：
npm install dynamic-vendor-webpack-plugin --save-dev
使用
dynamic-vendor-webpack-plugin 主要包括两个配置项：
- libraryNames：要动态打包的库的名字数组。
- outputPath：设置 vendor 文件输出的路径，默认为
./。
下面是一个使用 dynamic-vendor-webpack-plugin 的例子：
-- -------------------- ---- -------
----- -------------------------- - -----------------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- ----------------------------
------------- --------- -------------
----------- ----------------------
--
-
--上面的配置意味着，如果我们的代码中只使用了 react 和 react-dom 库中的部分功能，那么 dynamic-vendor-webpack-plugin 将会帮助我们将这些功能打包成一个小巧的 vendor 文件，存放在 "../public/static/js/" 目录下。
注意事项
- dynamic-vendor-webpack-plugin 不支持多入口，只能在单入口的情况下使用。
- 使用 dynamic-vendor-webpack-plugin 可能会导致一些潜在的问题，比如在使用
require.context等动态导入的情况下，无法获取正确的上下文信息。所以在使用时需要谨慎，避免出现问题。 - 使用 dynamic-vendor-webpack-plugin 需要安装 webpack 4+ 版本。
结语
dynamic-vendor-webpack-plugin 是一个非常有用的 NPM 包，可以帮助我们将第三方库打包成一个小巧的 vendor 文件，提高页面的加载速度。但是，在使用时需要注意动态导入的情况可能会出现问题，需要谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66ccd