fix: merge different chunk groups for same output filename

.changeset/twenty-cougars-fall.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/template-webpack-plugin": patch
+---
+
+fix: merge different chunk groups for same output filename

packages/webpack/react-webpack-plugin/test/cases/code-splitting/async-chunk-groups/foo.js

@@ -0,0 +1,3 @@
+export async function foo() {
+  return await Promise.resolve('**foo**');
+}

packages/webpack/react-webpack-plugin/test/cases/code-splitting/async-chunk-groups/index.jsx

@@ -0,0 +1,9 @@
+// Extra dynamic import in background thread
+if (__BACKGROUND__) {
+  import('./foo.js');
+}
+
+it('should have chunkName', async () => {
+  const { foo } = await import('./foo.js');
+  await expect(foo()).resolves.toBe(`**foo**`);
+});

packages/webpack/react-webpack-plugin/test/cases/code-splitting/async-chunk-groups/rspack.config.js

@@ -0,0 +1,60 @@
+import {
+  LynxEncodePlugin,
+  LynxTemplatePlugin,
+} from '@lynx-js/template-webpack-plugin';
+
+import { createConfig } from '../../../create-react-config.js';
+
+const config = createConfig();
+
+/** @type {import('@rspack/core').Configuration} */
+export default {
+  context: __dirname,
+  ...config,
+  output: {
+    ...config.output,
+    chunkFilename: '.rspeedy/async/[name].js',
+  },
+  plugins: [
+    ...config.plugins,
+    new LynxEncodePlugin(),
+    new LynxTemplatePlugin({
+      ...LynxTemplatePlugin.defaultOptions,
+      chunks: ['main:main-thread', 'main:background'],
+      filename: 'main/template.js',
+      intermediate: '.rspeedy/main',
+    }),
+    /**
+     * @param {import('@rspack/core').Compiler} compiler
+     */
+    (compiler) => {
+      compiler.hooks.thisCompilation.tap('test', compilation => {
+        const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(
+          compilation,
+        );
+        hooks.beforeEncode.tap(
+          'test',
+          (args) => {
+            expect(args.encodeData.lepusCode.root.name).toBeOneOf(
+              [ // main entry
+                'main:main-thread.js',
+                // foo.js lazy bundle
+                '.rspeedy/async/./foo.js-react:main-thread.js',
+              ],
+            );
+            expect(
+              Object.keys(args.encodeData.manifest).length,
+            ).toBe(1);
+            expect(Object.keys(args.encodeData.manifest)[0]).toBeOneOf(
+              [ // main entry
+                'main:background.js',
+                // foo.js lazy bundle
+                '.rspeedy/async/./foo.js-react:background.js',
+              ],
+            );
+          },
+        );
+      });
+    },
+  ],
+};

packages/webpack/react-webpack-plugin/test/cases/code-splitting/async-chunk-groups/test.config.cjs

@@ -0,0 +1,8 @@
+/** @type {import("@lynx-js/test-tools").TConfigCaseConfig} */
+module.exports = {
+  bundlePath: [
+    // We do not run main-thread.js since the async chunk has been modified.
+    // 'main:main-thread.js',
+    'main:background.js',
+  ],
+};

packages/webpack/template-webpack-plugin/src/LynxTemplatePlugin.ts

@@ -641,14 +641,12 @@
       return asyncChunkGroups;
     }
 
+    const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
+
     asyncChunkGroups = groupBy(
       compilation.chunkGroups
         .filter(cg => !cg.isInitial()),
-      (cg) =>
-        cg.origins
-          .sort((a, b) => a.request.localeCompare(b.request))
-          .map(({ request }) => request)
-          .join('|'),
+      cg => hooks.asyncChunkName.call(cg.name)!,
     );
 
     LynxTemplatePluginImpl.#asyncChunkGroups.set(compilation, asyncChunkGroups);