Dynamically loading chunks

[gernmartinez]

Hi, I have a project with multiple entries that work autonomously, something like:

entry: [
  'entryA.js',
  'entryB.js',
  'entryC.js'
]

and it generates the bundles ['entryA.js', 'entryB.js', 'entryC.js', 'vendor.js'], but for a performance issue I am looking to break "vendor" into smaller chunks, setting:

splitChunks: {
  chunks: 'all',
  name: false,
},

This generates the bundles ['entryA.js', 'entryB.js', 'entryC.js', 'chunk1.js', 'chunk2.js', 'chunk3.js'], where 'chunk1.js' is used by 'entryA.js' and 'entryB.js', 'chunk2.js' is used by 'entryB.js' and 'entryC.js', and 'chunk3.js' only by 'entryC', so I would like to be able to load those chunks dynamically depending on the 'entry' that is loaded (some pages only use one entry, and others more than one):

I saw that each entry registers its dependencies in the form:

__webpack_require__ => { // webpackRuntimeModules
  var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
  __webpack_require__.O(0, ["chunk1"], () => (__webpack_exec__("./src/entryA.ts")));
  var __webpack_exports__ = __webpack_require__.O();
}

but these dependencies are not automatically injected into the site because they are not "lazy", is there a way to make these chunks be injected dynamically with "requireEnsure" like the "lazy" dependencies do?

Regards

[alexander-akait]

I think you are looking for https://webpack.js.org/concepts/module-federation/, it is not an easy subject, but allow to use build very flexible application, please read small guides how it works and feel free to questions

[gernmartinez]

Hi, I read the documentation that you shared with me but even though it does something similar to what I'm looking for, I think it would not be the best option, given that it should have a mini project for each component, and we have many (120 so far), that work independently but at the same time share things, which would generate many complications when it comes to maintaining that entire structure.

[alexander-akait]

Also you can just try to use https://webpack.js.org/api/node/#multicompiler

[gernmartinez]

Hi, no, it doesn't work, because I need the shared dependencies to be loaded dynamically, not the main entry.

[alexander-akait]

You can also try https://webpack.js.org/plugins/dll-plugin/, anyway I recommend to use multi compiler mode and move vendors libraries to own compiler, there is no universal solution, it based on your architecture

[gernmartinez]

A friend created this plugin that does what I need, any feedback on it is appreciated. https://github.com/ramirezcgn/on-demand-chunk-loading-webpack-plugin