Tree shaking of shared dependencies in webpack 5 module federation

Question

I am working on an architecture for a dynamic dashboard with components fetched from different remote react bundles using webpack 5 module federation. I do have different libraries which are shared across some of these remote bundles. These packages are tree shakable. So each remote bundle will be having different codes from the same package. If I share these packages as singleton, when two components with same dependency loads to DOM in runtime, is there anyway webpack can get the lib code from both bundles merged? Or is it necessary that we have to disable tree shaking in such shared libraries? (By shared libraries I meant the npm packages)

H

Answer 1

Webpack automatically disables tree-shaking for shared packages.

Niggardly

Can you please provide a source for this? I'd love to show this to my boss. – Benignity

@Benignity This was true 2 years ago. I believe the creator(Zack Jackson) of module federation had made some significant changes since then, you probably want to reach him out to know the details. source: github.com/webpack/webpack/discussions/12532 * alexander-akait is the the maintainer of webpack – Niggardly

Answer 2

Without being able to see exactly what you want to do I'm not exactly sure if this completely answers your question, but might be useful to the situation. You can get more fine tuned control of bundles with modules.exports optimization. You can get pretty granular here. A fontawesome example is at the top of the code snippet along with the optimization settings

// Import within node app

  if ($('.fad').length) {
    import('../../node_modules/@fortawesome/fontawesome-pro/scss/duotone.scss');
  }

// Webpack 

modules.exports {
  optimization: {
    splitChunks : {
      chuncks: 'all',
      cacheGroups: {
      duotonecss: {
      test    : /[\\/]node_modules[\\/]@fortawesome[\\/]fontawesome-pro[\\/]scss[\\/](duotone)\.scss/,
      name    : 'duotonecss',
      chunks  : 'all',
      enforce : true,
       },
     },
    },
  },
};

Propst