CODEWITHSUNDEEP
javascriptreactjswebpack-5webpack-module-federation
jn_dev
jn_dev

Reputation: 301

Tree shaking of shared dependencies in webpack 5 module federation

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)

Upvotes: 16

Views: 2472

Answers (2)

Trevor Sutherland
Trevor Sutherland

Reputation: 11

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

Upvotes: 1

Xiaofeng Xie
Xiaofeng Xie

Reputation: 175

Webpack automatically disables tree-shaking for shared packages.

Upvotes: 3

Related Questions