Search code examples
javascriptwebwebpackdedupeplugincommonschunkplugin

De-Duplicate libraries in app within deeply nested node modules

I have a app in which i can add modules as node_modules. Now, these modules and app uses a library XYZ as node module. Also, these modules have other node modules which has their own library XYZ as a node module.

So, this is roughly how the structure of my app looks like enter image description here

I use gulp and webpack and i am trying to some how de-duplicate library XYZ. I want to build a task that would go through this nested tree of node modules and build out 1 common version of library XYZ. How can I achieve that?

I tries using deDupePlugin, where this is all i added to my gulp default task and it did not work.. Is there anything i missed?

plugins: [
            new webpack.optimize.DedupePlugin()
           // new CommonsChunkPlugin("commons", "commons.js")
        ],

OR, is there any other way to achieve that? Any help will be really appreciated

Solution

  • DedupePlugin will only dedupe files that are completely equal. Your modules might depend on different versions of the library, which is why it might not always get deduped. And even when files are deduped, the modules themselves won't be, so your requirement of a single instance won't be satisfied.

    You can use resolve.alias to redirect all require('libraryXYZ') calls to the same top-level instance.

    resolve: {
  alias: {
    libraryXYZ: require('path').resolve('./node_modules/libraryXYZ'),
  },
},

    Here is a comparison repository I made that showcases different ways to dedupe a module.