在前端开发过程中，我们经常会使用到类似于 Webpack 的打包工具来将我们的代码整合成一个或多个文件，以便于在浏览器上运行。但是由于不同的依赖关系，以及我们自己的代码编写习惯，可能会造成某些库被打包到多个文件中，也就是所谓的“bundle duplicates”。这会增加打包后的代码体积，影响性能。在这种情况下，我们可以使用一个叫做 bundle-duplicates-plugin 的 npm 包来自动去重。
什么是 bundle-duplicates-plugin？
bundle-duplicates-plugin 是一个 Webpack 的插件，它能够自动发现并去重您的打包文件中的重复依赖项，从而减小打包后的文件体积。如果您的应用程序依赖于大量的外部库，并且这些库在依赖图中有重叠的部分，这个插件就非常有用。
如何使用 bundle-duplicates-plugin？
首先，您需要安装 bundle-duplicates-plugin。在命令行中输入以下命令即可：
npm install --save-dev bundle-duplicates-plugin
接下来，在您的 Webpack 配置文件中添加以下代码：
const BundleDuplicatesPlugin = require('bundle-duplicates-plugin');
module.exports = {
// 其他配置项...
plugins: [
new BundleDuplicatesPlugin()
]
}这是最简单的配置方式。这将使用默认配置启用插件。如果您想定制插件的行为，可以提供一个选项对象作为插件的参数：
new BundleDuplicatesPlugin({
// 插件选项
})下面是一些可用的选项：
verbose（Boolean）：是否在控制台输出详细信息，默认值为false。emitErrors（Boolean）：是否在重复包被发现时终止编译过程，默认值为false。strict（Boolean）：是否仅在依赖完全相等时才算作重复依赖，默认值为false。ignore（Array<string>|RegExp|Function）：一个 RegExp、函数或字符串数组，用于从检查过程中排除某些文件或文件夹。
示例代码
下面是一个简单的示例，它演示了使用 bundle-duplicates-plugin 去重重复的 lodash 依赖项。假设您已经在本地安装了 lodash、webpack 和 bundle-duplicates-plugin。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ---------------------- - ------------------------------------
-------------- - -
------ -
----- ----------------
--
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ------------------------
-
--
-- ------------
------ - ---- ---------
------ -- ---- ---------
------ -- ---- ---------
-----------------------
------------------------
------------------------运行 webpack 命令后，控制台将输出以下内容：
-- -------------------- ---- -------
----- --------------------
-------- ------- ------
----- ----
----- --- ---------- --------
----- ---- ------ ----- -----
------- --- ----- ---- --------- ----
---------- ---- - -------
--- -------------- --- ----- --- -------
--- -------- -------- -- ----- --- -------可以看到，lodash 只被打包了一次，并且被正确地引用了三次。
总结
bundle-duplicates-plugin 是一个非常实用的插件，它可以帮助我们自动去重依赖项，减小打包后的文件大小。在使用该插件时，需要注意它的选项，以便更好地适应您的应用程序的需求。希望本教程能够帮助您更好地理解和使用 bundle-duplicates-plugin。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea481e8991b448dc074