I work on an application using Webpack (4.12) to build modules installed with yarn (1.2.1). It is controlled by yarn.lock, use a list of internal (pany) modules that has their own yarn.lock files and so on.

I found that modules of same version are duplicated a lot in the application bundle. Like lodash being included 9 times. I started looking into the versions and found that the 9 copies is just 2 different versions of lodash. Then I looked into what dependencies included them, here is the result for what modules dependencies on lodash (with alias names):

(^4.16.4 / 4.17.4) application
(^4.17.2 / 4.17.5) @grp/libA
(^4.16.4 / 4.17.4) @grp/libA / @grp/libB
(^4.16.4 / 4.17.4) @grp/libA / @grp/libC
(^4.17.4 / 4.17.5) @grp/libD
(^4.16.4 / 4.17.4) @grp/libD / @grp/libE
(^4.17.2 / 4.17.5) @grp/libF
(^4.16.4 / 4.17.4) @grp/libF / @grp/libG
(^4.16.4 / 4.17.4) @grp/libF / @grp/libG

The numbers in brackets show the version stated in package.json, and the actual version that is in node_modules (installed with yarn install).

I understand that modules of different versions might need to be duplicated to avoid errors, but even if yarn has the sub modules (like lodash under @grp/libA / @grp/libB and @grp/libA / @grp/libC) installed in each modules own node_modules, shouldn't webpack see that they include the same version of lodash and at least reduce it down to just the two copies for 4.17.4 and 4.17.5?

I work on an application using Webpack (4.12) to build modules installed with yarn (1.2.1). It is controlled by yarn.lock, use a list of internal (pany) modules that has their own yarn.lock files and so on.

I found that modules of same version are duplicated a lot in the application bundle. Like lodash being included 9 times. I started looking into the versions and found that the 9 copies is just 2 different versions of lodash. Then I looked into what dependencies included them, here is the result for what modules dependencies on lodash (with alias names):

(^4.16.4 / 4.17.4) application
(^4.17.2 / 4.17.5) @grp/libA
(^4.16.4 / 4.17.4) @grp/libA / @grp/libB
(^4.16.4 / 4.17.4) @grp/libA / @grp/libC
(^4.17.4 / 4.17.5) @grp/libD
(^4.16.4 / 4.17.4) @grp/libD / @grp/libE
(^4.17.2 / 4.17.5) @grp/libF
(^4.16.4 / 4.17.4) @grp/libF / @grp/libG
(^4.16.4 / 4.17.4) @grp/libF / @grp/libG

The numbers in brackets show the version stated in package.json, and the actual version that is in node_modules (installed with yarn install).

I understand that modules of different versions might need to be duplicated to avoid errors, but even if yarn has the sub modules (like lodash under @grp/libA / @grp/libB and @grp/libA / @grp/libC) installed in each modules own node_modules, shouldn't webpack see that they include the same version of lodash and at least reduce it down to just the two copies for 4.17.4 and 4.17.5?

• javascript
• webpack
• yarnpkg

2 Answers 2

I had the same issue, on a project using the following structure:

src/
node_modules/
  |_ ...
  |_ ui
      |_ node_modules
      |_ src/

To prevent duplicating vendors, I used the resolve property such as:

{
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, 'node_modules/ui/node_modules'),
        ],
    },
}

More details are available on the official doc, but to sum it up, it forces Webpack to check dependencies from these folders, in this exact order.

Hope it helps! :)

Here are some steps that can help you reduce duplicated packages in your webpack build. Let's take your example where lodash is bundled several times.

• Manually upgrade or downgrade packages depending lodash so you get as few versions as possible when running npm ls lodash or yarn list lodash in your srcdirectory. Example output for npm:

  [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  ├─┬ [email protected]
  │ └── [email protected]
  └── [email protected]

• Then, run npm dedupe or yarn dedupe so the package manager does the job of resolving duplicate depencies. You should then see a "deduped" mention next to the relevant packages:

  [email protected]
  ├─┬ [email protected]
  │ └── [email protected] deduped
  ├─┬ [email protected]
  │ └── [email protected] deduped
  └── [email protected]

You may also try to remove package-lock.json and npm or yarn install all dependencies again from scratch to minimize duplicates with different versions.