javascript - 前端项目使用 npm 时避免 bundle 中的重复模块

Question

Npm 允许在一个项目中使用同一个包的多个版本。这是一个强大的功能。

但是在大​​多数前端项目中，我认为不希望在不同版本中依赖同一个库。

在不同版本中依赖于同一个库意味着最终用户将不得不多次加载给定的库(作为单独的请求或作为更大包的一部分)。

但是，如果使用 npm 来管理前端项目的依赖项，您很快就会在不同版本中依赖于同一库。

我认为在大多数情况下这是不受欢迎的，而且大多数时候我们甚至都没有意识到这种情况。

我们遇到这种情况的一个简单案例:

在某个时间点，您在项目中安装了 react-router 和 history:

npm i -S react-router@1.0.0-rc1
npm i -S history@1.17.0   

那时 react-router 依赖于 history@1.17.0。因此，您的项目作为一个整体只依赖于此版本的 history。

稍后您决定升级到最新版本的react-router:

npm i -S react-router@2

现在 react-router 依赖于 history@2。

因此，您的项目现在依赖于 history@1.17.0 并且传递依赖于 history@2。

history 的两个版本都包含在您的 npm_modules 中。

如果您使用的是像 Webpack 或 Browerify 这样的模块打包器，您最终会得到一个包含两个版本的 history 的包。

您很可能没有注意到。但是如果您注意到的话，您可能会将您的直接依赖项升级到 `history@2。

我们如何处理这个问题？

如何判断我们的前端工程在不同版本中是否依赖同一个库？

我们如何才能避免最终 bundle 比应有的更大？

我知道从技术上讲，npm/Webpack/Browserify 在将不同版本的同一库的依赖项包含在一个包中是正确的。但我正在寻找一种方法，使这种情况的发生很容易被发现，以便开发人员可以采取措施优化依赖关系。

我还在这个 repo 中重新创建了示例:https://github.com/jbandi/npm-package-problems

Answer 1

find-duplicate-dependencies工具可用于检查 node_modules 目录并报告存在多个版本的包。

我想在 node_modules 级别解决这个问题是有意义的，因为这样做在 WebPack 和 Browserify 情况下都有效。