SplitChunksPlugin:Repeated packaging of synchronous dependencies of multi-entry asynchronously loaded modules

[danhuang250]

module.exports = {
  entry: {
    main: ['./src/main.ts',],
    preview: ['./src/main-preview.ts'],
  },
  optimization: {
    splitChunks: {
      allSdk: {
        test: /(@cs\/cs-all-sdk)[\\/]/,
        chunks: 'all',
      },
    },
  },
}

Project structure: My project has two entry points, main and preview. The main entry point asynchronously imports the a.js file, and the preview entry point asynchronously imports the b.js file. Both a and b files will synchronously import the allSdk module.
Current packaging result: The allSdk module will be generated twice, but allSdk will not be loaded in the HTML of the two entry documents.
Change configuration: Add name: 'allSdk' to splitChunks.allSdk. Although allSdk will only be packaged once, allSdk will be loaded in the HTML of both documents.

How should I configure to achieve packaging allSdk only once, and ensure this module does not directly load HTML documentation?？

[alexander-akait]

You can use - https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroupscachegroupreuseexistingchunk, only one chunk will be generated

[danhuang250]

Sorry, the background information I provided is not complete, this configuration is not useful.
The image below shows the packaging analysis results of the two entry points after configuration.

The image below shows a product of the build entry point

What configuration or reason causes this difference between one entry point and two entry points?

[alexander-akait]

Because by default each entrypoint (without dependOn) is considered as a separate point on a separate page, like you have two HTML pages, if you want to share something between entrypoints I recommend to create third entrypint (for example - shared) and use dependOn for others

[danhuang250]

This approach can indeed achieve bundling everything into a single package, but this package will be loaded in the HTML document. Because this package is only used when other modules are asynchronously loaded by the Entry Point module

[scameron]

I think you'll also need to dynamically load allSdk. You can specify the webpackChunkName magic comment to name the chunk and make sure the dependency ends up in a single chunk if you have multiple dynamic imports.

In my experience, the webpack chunk splitter will sometimes create a split chunk for sharing and sometimes won't, but it's very difficult to control deterministically or predict which configuration options will influence which splitting decisions. So you should find a good configuration that works well overall, and then use explicit dynamic imports to control chunk group boundaries in cases you want to control and ensure to be shared.