Module federation in combination with chunk grouping

418 Views Asked by At

I am trying to use ModuleFederationPlugin in an Angular project, I am able to get this working following the documentation available. What I am trying now to is to use chunk grouping configuration, like the example below

module.exports = {
  // ... 
  optimization: {
    splitChunks: {
      cacheGroups: {
        angular: {
          name: 'angular',
          test: /[\\\/]node_modules[\\\/]@angular[\\\/]/,
          chunks: 'all',
          priority: 10,
          enforce: true,
        },
      },
    },
  },
}; 

Build goes fine and generates chunk files based on the grouping configuration, but when I look at MFE initial chunk, I see it still refers/depends on chunks ignoring the chunk grouping configuration. For example initial chunk of MFE has below code where it has references to chunks and also grouped chunks .

register("@angular/animations/browser", "15.2.5", () => (Promise.all([__webpack_require__.e("angular"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_core_angular_core"), __webpack_require__.e("default-webpack_sharing_consume_default_angular_animations_angular_animations")]).then(() => (() => (__webpack_require__(/*! ./node_modules/@angular/animations/fesm2020/browser.mjs */ 72753))))));

Where as I expect it to be something like below

register("@angular/animations/browser", "15.2.5", () => (Promise.all([__webpack_require__.e("angular")]).then(() => (() => (__webpack_require__(/*! ./node_modules/@angular/animations/fesm2020/browser.mjs */ 72753))))));

I see that disabling 'default' chunk grouping by setting

{
  // ...
  optimization: {
    // ...
    splitchunks: {
      // ...
      cacheGroups: {
        default: false,
        // ...
      }
    }
  }
};

gives the above expected javascript output, but chunk sharing of module federation doesn't work; required chunks are again loaded from lazy loaded micro front end, though they are loaded from shell.

Is there something I miss ? any reference that I can go through to try a solution ?

Thank you, Rakesh.A

0

There are 0 best solutions below