Tree shaking of shared dependencies in webpack 5 module federation

user_1918869 0
Viewed 1013

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)

webpack-module-federation webpack-5 reactjs javascript
2 Answers

Webpack automatically disables tree-shaking for shared packages.

user_49045480

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,
       },
     },
    },
  },
};
user_170931380
Related