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