perf(bundler): fine-tuning of Webpack/Rspack optimizations (#11176)

slorber · web-flow · commit 2371ca7b7444 · 2025-05-13T13:48:11.000+02:00
diff --git a/packages/docusaurus-bundler/src/currentBundler.ts b/packages/docusaurus-bundler/src/currentBundler.ts
@@ -104,3 +104,46 @@ export async function getProgressBarPlugin({
 
   return WebpackBar;
 }
+
+export async function registerBundlerTracing({
+  currentBundler,
+}: {
+  currentBundler: CurrentBundler;
+}): Promise<() => Promise<void>> {
+  if (currentBundler.name === 'rspack') {
+    const Rspack = await importRspack();
+
+    // See https://rspack.dev/contribute/development/profiling
+    // File can be opened with https://ui.perfetto.dev/
+    if (process.env.DOCUSAURUS_RSPACK_TRACE) {
+      // We use the env variable as the "filter" attribute
+      // See values here: https://rspack.dev/contribute/development/tracing#tracing-filter
+      let filter = process.env.DOCUSAURUS_RSPACK_TRACE;
+
+      if (filter === 'true' || filter === '1') {
+        // Default value recommended by the Rspack team
+        // It's also what the CLI uses for the "overview" preset:
+        // https://github.com/web-infra-dev/rspack/blob/v1.3.10/packages/rspack-cli/src/utils/profile.ts
+        filter = 'info';
+      }
+
+      await Rspack.experiments.globalTrace.register(
+        filter,
+        'chrome',
+        './rspack-tracing.json',
+      );
+
+      console.info(`Rspack tracing registered, filter=${filter}`);
+
+      return async () => {
+        await Rspack.experiments.globalTrace.cleanup();
+        console.log(`Rspack tracing cleaned up, filter=${filter}`);
+      };
+    }
+  }
+
+  // We don't support Webpack tracing at the moment
+  return async () => {
+    // noop
+  };
+}
diff --git a/packages/docusaurus-bundler/src/index.ts b/packages/docusaurus-bundler/src/index.ts
@@ -12,6 +12,7 @@ export {
   getCSSExtractPlugin,
   getCopyPlugin,
   getProgressBarPlugin,
+  registerBundlerTracing,
 } from './currentBundler';
 
 export {getMinimizers} from './minification';
diff --git a/packages/docusaurus-faster/package.json b/packages/docusaurus-faster/package.json
@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@docusaurus/types": "3.7.0",
-    "@rspack/core": "^1.3.3",
+    "@rspack/core": "^1.3.10",
     "@swc/core": "^1.7.39",
     "@swc/html": "^1.7.39",
     "browserslist": "^4.24.2",
diff --git a/packages/docusaurus-faster/src/index.ts b/packages/docusaurus-faster/src/index.ts
@@ -11,16 +11,6 @@ import browserslist from 'browserslist';
 import {minify as swcHtmlMinifier} from '@swc/html';
 import type {JsMinifyOptions, Options as SwcOptions} from '@swc/core';
 
-// See https://rspack.dev/contribute/development/profiling
-// File can be opened with https://ui.perfetto.dev/
-if (process.env.DOCUSAURUS_RSPACK_TRACE) {
-  Rspack.experiments.globalTrace.register(
-    'trace',
-    'chrome',
-    './rspack-tracing.json',
-  );
-}
-
 export const swcLoader = require.resolve('swc-loader');
 
 export const getSwcLoaderOptions = ({
diff --git a/packages/docusaurus/src/commands/build/buildLocale.ts b/packages/docusaurus/src/commands/build/buildLocale.ts
@@ -8,7 +8,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 import _ from 'lodash';
-import {compile} from '@docusaurus/bundler';
+import {compile, registerBundlerTracing} from '@docusaurus/bundler';
 import logger, {PerfLogger} from '@docusaurus/logger';
 import {loadSite} from '../../server/site';
 import {handleBrokenLinks} from '../../server/brokenLinks';
@@ -35,6 +35,7 @@ export type BuildLocaleParams = {
 };
 
 const SkipBundling = process.env.DOCUSAURUS_SKIP_BUNDLING === 'true';
+const ExitAfterBundling = process.env.DOCUSAURUS_EXIT_AFTER_BUNDLING === 'true';
 
 export async function buildLocale({
   siteDir,
@@ -93,6 +94,9 @@ export async function buildLocale({
       `Skipping the Docusaurus bundling step because DOCUSAURUS_SKIP_BUNDLING='true'`,
     );
   } else {
+    const cleanupBundlerTracing = await registerBundlerTracing({
+      currentBundler: props.currentBundler,
+    });
     // Run webpack to build JS bundle (client) and static html files (server).
     await PerfLogger.async(`Bundling with ${props.currentBundler.name}`, () => {
       return compile({
@@ -102,6 +106,10 @@ export async function buildLocale({
         currentBundler: configureWebpackUtils.currentBundler,
       });
     });
+    await cleanupBundlerTracing();
+  }
+  if (ExitAfterBundling) {
+    return process.exit(0);
   }
 
   const {collectedData} = await PerfLogger.async('SSG', () =>
diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
@@ -249,6 +249,20 @@ export async function createBaseConfig({
       modules: ['node_modules', path.join(siteDir, 'node_modules')],
     },
     optimization: {
+      // The optimizations.concatenateModules is expensive
+      // - On the server, it's not useful to run it at all
+      // - On the client, it leads to a ~3% JS assets total size decrease
+      //   Let's keep it by default, but large sites may prefer faster builds
+      // See also https://github.com/facebook/docusaurus/pull/11176
+      concatenateModules: !isServer,
+
+      // The optimizations.mergeDuplicateChunks is expensive
+      // - On the server, it's not useful to run it at all
+      // - On the client, we compared assets/js before/after and see 0 change
+      //   `du -sk js-before js-after` => the JS assets have the exact same size
+      // See also https://github.com/facebook/docusaurus/pull/11176
+      mergeDuplicateChunks: true,
+
       // Only minimize client bundle in production because server bundle is only
       // used for static site generation
       minimize: minimizeEnabled,
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -164,7 +164,19 @@ export default async function createConfigAsync() {
     url: 'https://docusaurus.io',
     future: {
       v4: !isSlower, // Not accurate, but good enough
-      experimental_faster: !isSlower,
+      experimental_faster: isSlower
+        ? false
+        : {
+            // Verbose object: easier to independently test single attributes
+            swcJsLoader: true,
+            swcJsMinimizer: true,
+            swcHtmlMinimizer: true,
+            lightningCssMinimizer: true,
+            mdxCrossCompilerCache: true,
+            rspackBundler: true,
+            rspackPersistentCache: true,
+            ssgWorkerThreads: true,
+          },
       experimental_storage: {
         namespace: true,
       },
diff --git a/yarn.lock b/yarn.lock
