fix: forceSplitting not work with single-vendor (#4708)

Author: chenjiahan

e2e/cases/performance/single-vendor-splitting/index.test.ts

@@ -0,0 +1,20 @@
+import { basename } from 'node:path';
+import { build } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+test('should allow to use `forceSplitting` when chunkSplit is "single-vendor"', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+
+  const jsFiles = Object.keys(files)
+    .filter((name) => name.endsWith('.js'))
+    .map((name) => basename(name));
+
+  expect(jsFiles.length).toEqual(3);
+  expect(jsFiles).toContain('index.js');
+  expect(jsFiles).toContain('vendor.js');
+  expect(jsFiles).toContain('my-react.js');
+});

e2e/cases/performance/single-vendor-splitting/rsbuild.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    pluginReact({
+      splitChunks: {
+        react: false,
+      },
+    }),
+  ],
+  output: {
+    filenameHash: false,
+  },
+  performance: {
+    chunkSplit: {
+      strategy: 'single-vendor',
+      forceSplitting: {
+        'my-react': /node_modules[\\/]react[\\/]/,
+      },
+    },
+  },
+});

e2e/cases/performance/single-vendor-splitting/src/App.jsx

@@ -0,0 +1,3 @@
+const App = () => <div id="test">Hello Rsbuild!</div>;
+
+export default App;

e2e/cases/performance/single-vendor-splitting/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(React.createElement(App));
+}

packages/core/src/plugins/splitChunks.ts

@@ -1,9 +1,9 @@
 import assert from 'node:assert';
 import { NODE_MODULES_REGEX } from '../constants';
 import type {
+  ChunkSplit,
   ForceSplitting,
   Polyfill,
-  RsbuildChunkSplit,
   RsbuildPlugin,
   Rspack,
   SplitChunks,
@@ -32,7 +32,7 @@ interface SplitChunksContext {
   /**
    * User Rsbuild `chunkSplit` config
    */
-  userConfig: RsbuildChunkSplit;
+  userConfig: ChunkSplit;
   /**
    * The root path of current project
    */
@@ -43,7 +43,10 @@ interface SplitChunksContext {
   polyfill: Polyfill;
 }
 
-function getForceSplittingGroups(forceSplitting: ForceSplitting): CacheGroups {
+function getForceSplittingGroups(
+  forceSplitting: ForceSplitting,
+  strategy: ChunkSplit['strategy'],
+): CacheGroups {
   const cacheGroups: CacheGroups = {};
   const pairs = Array.isArray(forceSplitting)
     ? forceSplitting.map(
@@ -56,7 +59,8 @@ function getForceSplittingGroups(forceSplitting: ForceSplitting): CacheGroups {
       test: regexp,
       name: key,
       chunks: 'all',
-      priority: 0,
+      // ensure force splitting chunks have higher priority when chunkSplit is 'single-vendor'
+      priority: strategy === 'single-vendor' ? 1 : 0,
       // Ignore minimum size, minimum chunks and maximum requests and always create chunks.
       enforce: true,
     };
@@ -263,6 +267,7 @@ export const pluginSplitChunks = (): RsbuildPlugin => ({
         if (chunkSplit.forceSplitting) {
           forceSplittingGroups = getForceSplittingGroups(
             chunkSplit.forceSplitting,
+            chunkSplit.strategy,
           );
         }
 

packages/core/src/types/config.ts

@@ -608,7 +608,7 @@ export interface PerformanceConfig {
   /**
    * Configure the chunk splitting strategy.
    */
-  chunkSplit?: RsbuildChunkSplit;
+  chunkSplit?: ChunkSplit;
 
   /**
    * Analyze the size of output files.
@@ -655,7 +655,7 @@ export interface PerformanceConfig {
 
 export interface NormalizedPerformanceConfig extends PerformanceConfig {
   printFileSize: PrintFileSizeOptions | boolean;
-  chunkSplit: RsbuildChunkSplit;
+  chunkSplit: ChunkSplit;
 }
 
 export type SplitChunks = Configuration extends {
@@ -693,7 +693,7 @@ export interface SplitCustom extends BaseSplitRules {
   splitChunks?: SplitChunks;
 }
 
-export type RsbuildChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
+export type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;
 
 export type DistPathConfig = {
   /**