fix(rspeedy): duplicate chunks in chunkSplit with multiple entries

.changeset/light-donuts-sin.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/template-webpack-plugin": minor
+---
+
+Fixed an issue in rspeedy where chunks weren't being properly shared between multiple entries during chunk splitting. This resulted in duplicate chunks being generated, increasing bundle size and reducing performance.
+
+**BREAKING CHANGE**: `encodeData.manifest` now only contains the `/app-service.js` entry.

examples/react/lynx.config.js

@@ -5,6 +5,15 @@ import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
 const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
 
 export default defineConfig({
+  // performance: {
+  //   chunkSplit: {
+  //     strategy: 'split-by-experience',
+  //     override: {
+  //       // See: https://github.com/web-infra-dev/rspack/issues/9812
+  //       filename: '[name].[contenthash:8].js',
+  //     },
+  //   },
+  // },
   plugins: [
     pluginReactLynx(),
     pluginQRCode({

packages/webpack/css-extract-webpack-plugin/package.json

@@ -59,7 +59,7 @@
     "webpack": "^5.99.8"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.5.0 || ^0.6.0"
+    "@lynx-js/template-webpack-plugin": "^0.5.0 || ^0.6.0 || ^0.7.0"
   },
   "engines": {
     "node": ">=18"

packages/webpack/react-webpack-plugin/package.json

@@ -54,7 +54,7 @@
   },
   "peerDependencies": {
     "@lynx-js/react": "^0.103.0 || ^0.104.0 || ^0.105.0 || ^0.106.0 || ^0.107.0 || ^0.108.0",
-    "@lynx-js/template-webpack-plugin": "^0.4.0 || ^0.5.0 || ^0.6.0"
+    "@lynx-js/template-webpack-plugin": "^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0"
   },
   "peerDependenciesMeta": {
     "@lynx-js/react": {

packages/webpack/react-webpack-plugin/test/cases/code-splitting/amd-runtime-lazy-bundle-production/index.jsx

@@ -53,12 +53,20 @@ it('should have module.exports in foo.js template', async () => {
     expect.stringContaining('function (globDynamicComponentEntry)'),
   );
 
-  expect(tasmJSON.manifest['/.rspeedy/async/./foo.js-react:background.js'])
-    .toBeDefined();
-  expect(tasmJSON.manifest['/.rspeedy/async/./foo.js-react:background.js']).not
-    .toContain('const module = { exports: {} }');
+  expect(tasmJSON.manifest['/app-service.js']).toBeDefined();
   expect(tasmJSON.manifest['/.rspeedy/async/./foo.js-react:background.js']).not
-    .toContain('function (globDynamicComponentEntry)');
+    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).contain(
+    `lynx.requireModule('/.rspeedy/async/./foo.js-react:background.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const outputFoo = await readFile(
+    resolve(__dirname, '.rspeedy/async/./foo.js-react:background.js'),
+    'utf-8',
+  );
+
+  expect(outputFoo).not.toContain('const module = { exports: {} }');
+  expect(outputFoo).not.toContain('function (globDynamicComponentEntry)');
 });
 
 it('should have module.exports in bar.js template', async () => {
@@ -78,12 +86,20 @@ it('should have module.exports in bar.js template', async () => {
     expect.stringContaining('function (globDynamicComponentEntry)'),
   );
 
-  expect(tasmJSON.manifest['/.rspeedy/async/./bar.js-react:background.js'])
-    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).toBeDefined();
   expect(tasmJSON.manifest['/.rspeedy/async/./bar.js-react:background.js']).not
-    .toContain('const module = { exports: {} }');
-  expect(tasmJSON.manifest['/.rspeedy/async/./bar.js-react:background.js']).not
-    .toContain('function (globDynamicComponentEntry)');
+    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).contain(
+    `lynx.requireModule('/.rspeedy/async/./bar.js-react:background.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const outputBar = await readFile(
+    resolve(__dirname, '.rspeedy/async/./bar.js-react:background.js'),
+    'utf-8',
+  );
+
+  expect(outputBar).not.toContain('const module = { exports: {} }');
+  expect(outputBar).not.toContain('function (globDynamicComponentEntry)');
 });
 
 it('should have module.exports in baz.js template', async () => {
@@ -103,10 +119,18 @@ it('should have module.exports in baz.js template', async () => {
     expect.stringContaining('function (globDynamicComponentEntry)'),
   );
 
-  expect(tasmJSON.manifest['/.rspeedy/async/./baz.js-react:background.js'])
-    .toBeDefined();
-  expect(tasmJSON.manifest['/.rspeedy/async/./baz.js-react:background.js']).not
-    .toContain('const module = { exports: {} }');
+  expect(tasmJSON.manifest['/app-service.js']).toBeDefined();
   expect(tasmJSON.manifest['/.rspeedy/async/./baz.js-react:background.js']).not
-    .toContain('function (globDynamicComponentEntry)');
+    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).contain(
+    `lynx.requireModule('/.rspeedy/async/./baz.js-react:background.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const outputBaz = await readFile(
+    resolve(__dirname, '.rspeedy/async/./baz.js-react:background.js'),
+    'utf-8',
+  );
+
+  expect(outputBaz).not.toContain('const module = { exports: {} }');
+  expect(outputBaz).not.toContain('function (globDynamicComponentEntry)');
 });

packages/webpack/react-webpack-plugin/test/cases/code-splitting/amd-runtime-production/index.jsx

@@ -25,12 +25,20 @@ it('should have module.exports in foo.js template', async () => {
     expect.stringContaining('function (globDynamicComponentEntry)'),
   );
 
-  expect(tasmJSON.manifest['/.rspeedy/async/./foo.js-react:background.js'])
-    .toBeDefined();
-  expect(tasmJSON.manifest['/.rspeedy/async/./foo.js-react:background.js']).not
-    .toContain('const module = { exports: {} }');
+  expect(tasmJSON.manifest['/app-service.js']).toBeDefined();
   expect(tasmJSON.manifest['/.rspeedy/async/./foo.js-react:background.js']).not
-    .toContain('function (globDynamicComponentEntry)');
+    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).contain(
+    `lynx.requireModule('/.rspeedy/async/./foo.js-react:background.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const outputFoo = await readFile(
+    resolve(__dirname, '.rspeedy/async/./foo.js-react:background.js'),
+    'utf-8',
+  );
+
+  expect(outputFoo).not.toContain('const module = { exports: {} }');
+  expect(outputFoo).not.toContain('function (globDynamicComponentEntry)');
 });
 
 it('should have module.exports in bar.js template', async () => {
@@ -50,12 +58,20 @@ it('should have module.exports in bar.js template', async () => {
     expect.stringContaining('function (globDynamicComponentEntry)'),
   );
 
-  expect(tasmJSON.manifest['/.rspeedy/async/./bar.js-react:background.js'])
-    .toBeDefined();
-  expect(tasmJSON.manifest['/.rspeedy/async/./bar.js-react:background.js']).not
-    .toContain('const module = { exports: {} }');
+  expect(tasmJSON.manifest['/app-service.js']).toBeDefined();
   expect(tasmJSON.manifest['/.rspeedy/async/./bar.js-react:background.js']).not
-    .toContain('function (globDynamicComponentEntry)');
+    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).contain(
+    `lynx.requireModule('/.rspeedy/async/./bar.js-react:background.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const outputBar = await readFile(
+    resolve(__dirname, '.rspeedy/async/./bar.js-react:background.js'),
+    'utf-8',
+  );
+
+  expect(outputBar).not.toContain('const module = { exports: {} }');
+  expect(outputBar).not.toContain('function (globDynamicComponentEntry)');
 });
 
 it('should have module.exports in baz.js template', async () => {
@@ -75,10 +91,18 @@ it('should have module.exports in baz.js template', async () => {
     expect.stringContaining('function (globDynamicComponentEntry)'),
   );
 
-  expect(tasmJSON.manifest['/.rspeedy/async/./baz.js-react:background.js'])
-    .toBeDefined();
-  expect(tasmJSON.manifest['/.rspeedy/async/./baz.js-react:background.js']).not
-    .toContain('const module = { exports: {} }');
+  expect(tasmJSON.manifest['/app-service.js']).toBeDefined();
   expect(tasmJSON.manifest['/.rspeedy/async/./baz.js-react:background.js']).not
-    .toContain('function (globDynamicComponentEntry)');
+    .toBeDefined();
+  expect(tasmJSON.manifest['/app-service.js']).contain(
+    `lynx.requireModule('/.rspeedy/async/./baz.js-react:background.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const outputBaz = await readFile(
+    resolve(__dirname, '.rspeedy/async/./baz.js-react:background.js'),
+    'utf-8',
+  );
+
+  expect(outputBaz).not.toContain('const module = { exports: {} }');
+  expect(outputBaz).not.toContain('function (globDynamicComponentEntry)');
 });

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

@@ -146,6 +146,17 @@ export class LynxEncodePluginImpl {
         const { encodeData } = args;
         const { manifest } = encodeData;
 
+        let publicPath = '/';
+        if (typeof compilation?.outputOptions.publicPath === 'function') {
+          compilation.errors.push(
+            new compiler.webpack.WebpackError(
+              '`publicPath` as a function is not supported yet.',
+            ),
+          );
+        } else {
+          publicPath = compilation?.outputOptions.publicPath ?? '/';
+        }
+
         if (!isDebug() && !isDev && !isRsdoctor()) {
           [
             encodeData.lepusCode.root,
@@ -169,27 +180,19 @@ export class LynxEncodePluginImpl {
           //     lynx.requireModule('initial-chunk1')
           //     lynx.requireModule('initial-chunk2')
           //   `,
-          //   'initial-chunk1': `<content-of-initial-chunk>`,
-          //   'initial-chunk2': `<content-of-initial-chunk>`,
           // },
           // ```
           '/app-service.js': [
             this.#appServiceBanner(),
             Object.keys(manifest)
               .map((name) =>
                 `module.exports=lynx.requireModule('${
-                  this.#formatJSName(name)
+                  this.#formatJSName(name, publicPath)
                 }',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`
               )
               .join(','),
             this.#appServiceFooter(),
           ].join(''),
-          ...(Object.fromEntries(
-            Object.entries(manifest).map(([name, source]) => [
-              this.#formatJSName(name),
-              source,
-            ]),
-          )),
         };
 
         return args;
@@ -230,8 +233,8 @@ export class LynxEncodePluginImpl {
     return amdFooter + loadScriptFooter;
   }
 
-  #formatJSName(name: string): string {
-    return `/${name}`;
+  #formatJSName(name: string, publicPath: string): string {
+    return publicPath + name;
   }
 
   protected options: Required<LynxEncodePluginOptions>;

packages/webpack/template-webpack-plugin/test/cases/code-splitting/async-chunk/index.js

@@ -29,9 +29,16 @@ it('should generate correct foo template', async () => {
 
   const content = await readFile(tasmJSONPath, 'utf-8');
   const { sourceContent, manifest } = JSON.parse(content);
+
+  const output = resolve(__dirname, 'foo:background.rspack.bundle.js');
+  expect(existsSync(output));
+
+  const outputContent = await readFile(output, 'utf-8');
+  expect(outputContent).toContain(['function', 'foo()'].join(' '));
+
   expect(sourceContent).toHaveProperty('appType', 'DynamicComponent');
-  expect(manifest).toHaveProperty(
-    '/foo:background.rspack.bundle.js',
-    expect.stringContaining('function foo()'),
+
+  expect(manifest['/app-service.js']).toContain(
+    `lynx.requireModule('/foo:background.rspack.bundle.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
   );
 });

packages/webpack/template-webpack-plugin/test/cases/code-splitting/duplicated-async-chunk/a.js

@@ -23,11 +23,17 @@ it('should have correct tasm.json', async () => {
   );
   expect(fs.existsSync(target));
 
-  const content = await fs.promises.readFile(target, 'utf-8');
+  const output = path.resolve(__dirname, 'a.js');
+  expect(fs.existsSync(output));
+  const outputContent = await fs.promises.readFile(output, 'utf-8');
+  expect(outputContent).toContain(['**', 'aaa', '**'].join(''));
 
+  const content = await fs.promises.readFile(target, 'utf-8');
   const { manifest } = JSON.parse(content);
 
-  expect(manifest['/a/a.js']).toContain(['**', 'aaa', '**'].join(''));
+  expect(manifest['/app-service.js']).toContain(
+    `lynx.requireModule('/a/a.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 });
 
 it('should generate correct bundle', async () => {
@@ -47,11 +53,22 @@ it('should generate correct bundle', async () => {
   expect([foo, bar, baz].every(p => fs.existsSync(p))).toBeTruthy();
 
   const fooContent = await fs.promises.readFile(foo, 'utf-8');
-  expect(fooContent).toContain('function foo()');
+  expect(fooContent).toContain(
+    `lynx.requireModule('/foo/foo.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 
   const barContent = await fs.promises.readFile(bar, 'utf-8');
-  expect(barContent).toContain('function bar()');
+  expect(barContent).toContain(
+    `lynx.requireModule('/bar/bar.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 
   const bazContent = await fs.promises.readFile(baz, 'utf-8');
-  expect(bazContent).toContain('function baz()');
+  expect(bazContent).toContain(
+    `lynx.requireModule('/baz/baz.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
+
+  const asyncTemplates = await fs.promises.readdir(
+    path.resolve(__dirname, '../async'),
+  );
+  expect(asyncTemplates).toHaveLength(3); // foo, bar, baz
 });

packages/webpack/template-webpack-plugin/test/cases/code-splitting/duplicated-async-chunk/b.js

@@ -23,11 +23,17 @@ it('should have correct tasm.json', async () => {
   );
   expect(fs.existsSync(target));
 
-  const content = await fs.promises.readFile(target, 'utf-8');
+  const output = path.resolve(__dirname, 'b.js');
+  expect(fs.existsSync(output));
+  const outputContent = await fs.promises.readFile(output, 'utf-8');
+  expect(outputContent).toContain(['**', 'bbb', '**'].join(''));
 
+  const content = await fs.promises.readFile(target, 'utf-8');
   const { manifest } = JSON.parse(content);
 
-  expect(manifest['/b/b.js']).toContain(['**', 'bbb', '**'].join(''));
+  expect(manifest['/app-service.js']).toContain(
+    `lynx.requireModule('/b/b.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 });
 
 it('should generate correct bundle', async () => {
@@ -47,13 +53,19 @@ it('should generate correct bundle', async () => {
   expect([foo, bar, baz].every(p => fs.existsSync(p))).toBeTruthy();
 
   const fooContent = await fs.promises.readFile(foo, 'utf-8');
-  expect(fooContent).toContain('function foo()');
+  expect(fooContent).toContain(
+    `lynx.requireModule('/foo/foo.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 
   const barContent = await fs.promises.readFile(bar, 'utf-8');
-  expect(barContent).toContain('function bar()');
+  expect(barContent).toContain(
+    `lynx.requireModule('/bar/bar.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 
   const bazContent = await fs.promises.readFile(baz, 'utf-8');
-  expect(bazContent).toContain('function baz()');
+  expect(bazContent).toContain(
+    `lynx.requireModule('/baz/baz.js',globDynamicComponentEntry?globDynamicComponentEntry:'__Card__')`,
+  );
 
   const asyncTemplates = await fs.promises.readdir(
     path.resolve(__dirname, '../async'),