Avoiding duplicate modules in bundles when using npm for front-end projects

Question

Npm allows several versions of the same package to be used in a project. This is a powerful feature.

However in most front-end projects, I would argue that it is not desired to have dependencies on the same library in different versions.

Having dependencies on the same library in different versions means, that the end-user would have to load the given library several times (as seperate requests or as part of a bigger bundle).

However if npm is used to manage dependencies of a frontend-project, you can end up very quickly with dependencies on the same library in different versions.

I think in most cases this is undesired and most of the time we are not even aware of the situation.

A simple case where we end up in such a situation:

At some point in time you install react-router and history in your project:

npm i -S [email protected]
npm i -S [email protected]   

At that time react-router has a dependency to [email protected]. As a result your project as a whole has only a dependency to this version of history.

Later you decide to upgrade to the latest version of react-router:

npm i -S react-router@2

Now react-router has a dependency on history@2.

As a consequence your project has now a dependency on [email protected] and a transitive dependency on history@2.

Both versions of history are included in your npm_modules.

If your are using a module bundler like Webpack or Browerify, you end up with a bundle that contains both versions of history.

Most probably you don't notice. But if you would notice, you would probably upgrade your direct dependency to `history@2.

How can we deal with this problem?

How can we find out if our front-end project has dependencies on the same library in different versions?

How can we avoid ending up with bundles that are bigger than they should be?

I know that technically npm/Webpack/Browserify are correct in including dependencies on the same library in different versions in a bundle. But I am looking for a way to make it easily visible that this is happening, so that the developer can take steps to optimize the dependencies.

I also recreated the example in this repo: https://github.com/jbandi/npm-package-problems

Answer 1

The find-duplicate-dependencies tool can be used to examine a node_modules directory and report upon packages that are present with multiple versions.

I guess it makes some sense to tackle the problem at a node_modules-level, as doing so works in both WebPack and Browserify situations.