From ce88eed3ba33889e05ddd263941fa344185e57a2 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 25 Nov 2025 15:06:24 +0000
Subject: [PATCH 1/7] Webpack: Improve performance of module-mocking plugins

---
 .../webpack-inject-mocker-runtime-plugin.ts   | 10 +++--
 .../src/plugins/webpack-mock-plugin.ts        | 42 +++++++++++++++----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
index da843d1cd782..b3eaef73fe07 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
@@ -13,6 +13,7 @@ const PLUGIN_NAME = 'WebpackInjectMockerRuntimePlugin';
  * Storybook preview bundle, are executed.
  */
 export class WebpackInjectMockerRuntimePlugin {
+  private cachedRuntime: string | null = null;
   // We need to lazy-require HtmlWebpackPlugin because it's an optional peer dependency.
   private getHtmlWebpackPlugin(compiler: Compiler): typeof HtmlWebpackPlugin | null {
     try {
@@ -52,7 +53,8 @@ export class WebpackInjectMockerRuntimePlugin {
         PLUGIN_NAME,
         (data, cb) => {
           try {
-            const runtimeScriptContent = getMockerRuntime();
+            const runtimeScriptContent =
+              this.cachedRuntime ?? (this.cachedRuntime = getMockerRuntime());
             const runtimeAssetName = 'mocker-runtime-injected.js';
 
             // Use the documented `emitAsset` method to add the pre-bundled runtime script
@@ -62,10 +64,12 @@ export class WebpackInjectMockerRuntimePlugin {
               new compiler.webpack.sources.RawSource(runtimeScriptContent)
             );
 
-            // Prepend the name of our new asset to the list of JavaScript files.
+            // Prepend the name of our new asset to the list of JavaScript files, once.
             // HtmlWebpackPlugin will automatically create a <script> tag for it
             // and place it at the beginning of the body scripts.
-            data.assets.js.unshift(runtimeAssetName);
+            if (!data.assets.js.includes(runtimeAssetName)) {
+              data.assets.js.unshift(runtimeAssetName);
+            }
             cb(null, data);
           } catch (error) {
             // In case of an error (e.g., file not found), pass it to Webpack's compilation.
diff --git a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
index 7a3f4b8f2dfe..c2eefb566b91 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
@@ -8,6 +8,7 @@ import {
   resolveExternalModule,
   resolveWithExtensions,
 } from 'storybook/internal/mocking-utils';
+import { logger } from 'storybook/internal/node-logger';
 
 import { findMockRedirect } from '@vitest/mocker/redirect';
 import type { Compiler } from 'webpack';
@@ -49,6 +50,8 @@ const PLUGIN_NAME = 'storybook-mock-plugin';
 export class WebpackMockPlugin {
   private readonly options: WebpackMockPluginOptions;
   private mockMap: Map<string, ResolvedMock> = new Map();
+  private candidateSpecifiers: Set<string> = new Set();
+  private lastPreviewMtime: number | undefined;
 
   constructor(options: WebpackMockPluginOptions) {
     if (!options.previewConfigPath) {
@@ -63,20 +66,26 @@ export class WebpackMockPlugin {
    * @param {Compiler} compiler The Webpack compiler instance.
    */
   public apply(compiler: Compiler): void {
-    const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
-
     // This function will be called to update the mock map before each compilation.
     const updateMocks = () => {
+      const mTimePreviewConfig = this.getPreviewConfigMtime(compiler);
+      if (
+        this.lastPreviewMtime &&
+        mTimePreviewConfig &&
+        mTimePreviewConfig <= this.lastPreviewMtime
+      ) {
+        return; // unchanged
+      }
+      const resolved = this.extractAndResolveMocks(compiler);
       this.mockMap = new Map(
-        this.extractAndResolveMocks(compiler).flatMap((mock) => [
-          // first one, full path
+        resolved.flatMap((mock) => [
           [mock.absolutePath, mock],
-          // second one, without the extension
           [mock.absolutePath.replace(/\.[^.]+$/, ''), mock],
         ])
       );
-      // divide by 2 because we add both the full path and the path without the extension
-      logger.info(`Mock map updated with ${this.mockMap.size / 2} mocks.`);
+      this.candidateSpecifiers = new Set(resolved.map((m) => m.path));
+      this.lastPreviewMtime = mTimePreviewConfig;
+      logger.info(`Mock map updated with ${resolved.length} mocks.`);
     };
 
     compiler.hooks.beforeRun.tap(PLUGIN_NAME, updateMocks); // for build
@@ -85,10 +94,19 @@ export class WebpackMockPlugin {
     // Apply the replacement plugin. Its callback will now use the dynamically updated mockMap.
     new compiler.webpack.NormalModuleReplacementPlugin(/.*/, (resource) => {
       try {
+        if (this.mockMap.size === 0) {
+          return;
+        }
         const path = resource.request;
         const importer = resource.context;
 
         const isExternal = getIsExternal(path, importer);
+        // Early filter only for external specifiers. Relative/local specifiers need resolution
+
+        // Early filter only for external specifiers. Relative/local specifiers need resolution
+        if (isExternal && !this.candidateSpecifiers.has(path)) {
+          return;
+        }
         const absolutePath = isExternal
           ? resolveExternalModule(path, importer)
           : resolveWithExtensions(path, importer);
@@ -115,6 +133,16 @@ export class WebpackMockPlugin {
     });
   }
 
+  private getPreviewConfigMtime(compiler: Compiler): number | undefined {
+    try {
+      const fs = compiler.inputFileSystem as any;
+      const stat = fs.statSync?.(this.options.previewConfigPath);
+      return stat?.mtime?.getTime?.();
+    } catch {
+      return undefined;
+    }
+  }
+
   /**
    * Reads the preview config, parses it to find all `sb.mock()` calls, and resolves their
    * corresponding mock implementations.

From 5c0c2779cfc8f8ee58cb665ea5d053646d35b77c Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 26 Nov 2025 18:27:04 +0000
Subject: [PATCH 2/7] Prevent duplicate asset emission and avoid rebuild loops
 in Webpack configuration

---
 .../webpack-inject-mocker-runtime-plugin.ts        | 14 +++++++-------
 .../src/preview/iframe-webpack.config.ts           |  5 +++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
index b3eaef73fe07..84e0fcdfdac6 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts
@@ -59,17 +59,17 @@ export class WebpackInjectMockerRuntimePlugin {
 
             // Use the documented `emitAsset` method to add the pre-bundled runtime script
             // to the compilation's assets. This is the standard Webpack way.
-            compilation.emitAsset(
-              runtimeAssetName,
-              new compiler.webpack.sources.RawSource(runtimeScriptContent)
-            );
+            if (!compilation.getAsset(runtimeAssetName)) {
+              compilation.emitAsset(
+                runtimeAssetName,
+                new compiler.webpack.sources.RawSource(runtimeScriptContent)
+              );
+              data.assets.js.unshift(runtimeAssetName);
+            }
 
             // Prepend the name of our new asset to the list of JavaScript files, once.
             // HtmlWebpackPlugin will automatically create a <script> tag for it
             // and place it at the beginning of the body scripts.
-            if (!data.assets.js.includes(runtimeAssetName)) {
-              data.assets.js.unshift(runtimeAssetName);
-            }
             cb(null, data);
           } catch (error) {
             // In case of an error (e.g., file not found), pass it to Webpack's compilation.
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 0f28b883d413..6712aed8e5d6 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -1,4 +1,4 @@
-import { dirname, join, resolve } from 'node:path';
+import { join, posix, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import {
@@ -126,7 +126,8 @@ export default async (
       logging: 'error',
     },
     watchOptions: {
-      ignored: /node_modules/,
+      // Ignore node_modules and the output directory to avoid rebuild loops
+      ignored: ['**/node_modules', posix.resolve(workingDir, outputDir)],
     },
     externals,
     ignoreWarnings: [

From 180015d5a085c5d99476ed1032e91cdb192f4249 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 27 Nov 2025 08:37:43 +0000
Subject: [PATCH 3/7] Revert

---
 .../src/presets/custom-webpack-preset.ts      | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts b/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
index 20947f59e5a9..eedd493d2659 100644
--- a/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
+++ b/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
@@ -9,8 +9,8 @@ import { loadCustomWebpackConfig } from '@storybook/core-webpack';
 import webpackModule from 'webpack';
 import type { Configuration } from 'webpack';
 
-import { WebpackInjectMockerRuntimePlugin } from '../plugins/webpack-inject-mocker-runtime-plugin';
-import { WebpackMockPlugin } from '../plugins/webpack-mock-plugin';
+// import { WebpackInjectMockerRuntimePlugin } from '../plugins/webpack-inject-mocker-runtime-plugin';
+// import { WebpackMockPlugin } from '../plugins/webpack-mock-plugin';
 import { createDefaultWebpackConfig } from '../preview/base-webpack.config';
 
 export const swc: PresetProperty<'swc'> = (config: Record<string, any>): Record<string, any> => {
@@ -42,24 +42,27 @@ export async function webpackFinal(config: Configuration, options: Options) {
   config.plugins = config.plugins || [];
 
   // 1. Add the loader to normalize sb.mock(import(...)) calls.
-  config.module!.rules!.push({
-    test: /preview\.(t|j)sx?$/,
-    use: [
-      {
-        loader: fileURLToPath(
-          import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader')
-        ),
-      },
-    ],
-  });
+  // Temporarily disabled: module-mocking transform
+  // config.module!.rules!.push({
+  //   test: /preview\.(t|j)sx?$/,
+  //   use: [
+  //     {
+  //       loader: fileURLToPath(
+  //         import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader')
+  //       ),
+  //     },
+  //   ],
+  // });
 
   // 2. Add the plugin to handle module replacement based on sb.mock() calls.
   // This plugin scans the preview file and sets up rules to swap modules.
-  config.plugins.push(new WebpackMockPlugin({ previewConfigPath }));
+  // Temporarily disabled: module-mocking plugin
+  // config.plugins.push(new WebpackMockPlugin({ previewConfigPath }));
 
   // 3. Add the plugin to inject the mocker runtime script into the HTML.
   // This ensures the `sb` object is available before any other code runs.
-  config.plugins.push(new WebpackInjectMockerRuntimePlugin());
+  // Temporarily disabled: injected mocker runtime script
+  // config.plugins.push(new WebpackInjectMockerRuntimePlugin());
   return config;
 }
 

From f59138dea46db3619c63961fd14d4c1faae4c947 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 21 Jan 2026 12:54:53 +0100
Subject: [PATCH 4/7] Revert "Revert"

This reverts commit 180015d5a085c5d99476ed1032e91cdb192f4249.
---
 .../src/presets/custom-webpack-preset.ts      | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts b/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
index eedd493d2659..20947f59e5a9 100644
--- a/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
+++ b/code/builders/builder-webpack5/src/presets/custom-webpack-preset.ts
@@ -9,8 +9,8 @@ import { loadCustomWebpackConfig } from '@storybook/core-webpack';
 import webpackModule from 'webpack';
 import type { Configuration } from 'webpack';
 
-// import { WebpackInjectMockerRuntimePlugin } from '../plugins/webpack-inject-mocker-runtime-plugin';
-// import { WebpackMockPlugin } from '../plugins/webpack-mock-plugin';
+import { WebpackInjectMockerRuntimePlugin } from '../plugins/webpack-inject-mocker-runtime-plugin';
+import { WebpackMockPlugin } from '../plugins/webpack-mock-plugin';
 import { createDefaultWebpackConfig } from '../preview/base-webpack.config';
 
 export const swc: PresetProperty<'swc'> = (config: Record<string, any>): Record<string, any> => {
@@ -42,27 +42,24 @@ export async function webpackFinal(config: Configuration, options: Options) {
   config.plugins = config.plugins || [];
 
   // 1. Add the loader to normalize sb.mock(import(...)) calls.
-  // Temporarily disabled: module-mocking transform
-  // config.module!.rules!.push({
-  //   test: /preview\.(t|j)sx?$/,
-  //   use: [
-  //     {
-  //       loader: fileURLToPath(
-  //         import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader')
-  //       ),
-  //     },
-  //   ],
-  // });
+  config.module!.rules!.push({
+    test: /preview\.(t|j)sx?$/,
+    use: [
+      {
+        loader: fileURLToPath(
+          import.meta.resolve('@storybook/builder-webpack5/loaders/storybook-mock-transform-loader')
+        ),
+      },
+    ],
+  });
 
   // 2. Add the plugin to handle module replacement based on sb.mock() calls.
   // This plugin scans the preview file and sets up rules to swap modules.
-  // Temporarily disabled: module-mocking plugin
-  // config.plugins.push(new WebpackMockPlugin({ previewConfigPath }));
+  config.plugins.push(new WebpackMockPlugin({ previewConfigPath }));
 
   // 3. Add the plugin to inject the mocker runtime script into the HTML.
   // This ensures the `sb` object is available before any other code runs.
-  // Temporarily disabled: injected mocker runtime script
-  // config.plugins.push(new WebpackInjectMockerRuntimePlugin());
+  config.plugins.push(new WebpackInjectMockerRuntimePlugin());
   return config;
 }
 

From 7b0a781776c85874b81ebd0acdc72adcd290a579 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 21 Jan 2026 12:56:53 +0100
Subject: [PATCH 5/7] Revert

---
 .../builder-webpack5/src/preview/iframe-webpack.config.ts    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index b800339c9772..ab35c51aece8 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -1,4 +1,4 @@
-import { join, posix, resolve } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import {
@@ -126,8 +126,7 @@ export default async (
       logging: 'error',
     },
     watchOptions: {
-      // Ignore node_modules and the output directory to avoid rebuild loops
-      ignored: ['**/node_modules', posix.resolve(workingDir, outputDir)],
+      ignored: /node_modules/,
     },
     externals,
     ignoreWarnings: [

From 8cabf98da93e7f6fbcd64cc5f601695fdc3aaf5e Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 21 Jan 2026 12:58:09 +0100
Subject: [PATCH 6/7] Remove comment

---
 .../builder-webpack5/src/plugins/webpack-mock-plugin.ts         | 2 --
 1 file changed, 2 deletions(-)

diff --git a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
index c2eefb566b91..afad6e166602 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
@@ -101,8 +101,6 @@ export class WebpackMockPlugin {
         const importer = resource.context;
 
         const isExternal = getIsExternal(path, importer);
-        // Early filter only for external specifiers. Relative/local specifiers need resolution
-
         // Early filter only for external specifiers. Relative/local specifiers need resolution
         if (isExternal && !this.candidateSpecifiers.has(path)) {
           return;

From 5d31c5e8be809e4ed7274506c09a40726c2be9ee Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 21 Jan 2026 13:56:31 +0100
Subject: [PATCH 7/7] Only log mock message when necessary

---
 .../builder-webpack5/src/plugins/webpack-mock-plugin.ts      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
index afad6e166602..21e79a1c6c23 100644
--- a/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
+++ b/code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts
@@ -85,7 +85,10 @@ export class WebpackMockPlugin {
       );
       this.candidateSpecifiers = new Set(resolved.map((m) => m.path));
       this.lastPreviewMtime = mTimePreviewConfig;
-      logger.info(`Mock map updated with ${resolved.length} mocks.`);
+
+      if (resolved.length > 0) {
+        logger.info(`Mock map updated with ${resolved.length} mocks.`);
+      }
     };
 
     compiler.hooks.beforeRun.tap(PLUGIN_NAME, updateMocks); // for build