Build: Support big metafiles in bundle analyzer by JReinhold · Pull Request #32109 · storybookjs/storybook

JReinhold · 2025-07-23T09:18:21Z

Works on #31787

Replaces #31644 (which it takes inspiration from)

What I did

This PR improves the metafile analysis:

Refactor the bundle generation script
Fix postbuild scripts never being executed
Change logic so that metafiles are also continously generated in watch mode
Refactor the metafile analysis stories, to have a local version of the UI instead of relying on the one hosted at https://esbuild.github.io/analyze . This means that there is now no limit to the size of metafiles we can analyze, as the metafile is read directly from the iframe instead of via query strings

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

This PR fundamentally transforms Storybook's bundle analyzer to handle large metafiles by replacing the external esbuild analyzer dependency with a local implementation. The key architectural change moves from using URL query strings (which have size limitations) to direct iframe communication via globalThis.metafile.

The implementation includes:

Local Bundle Analyzer: Creates a complete local copy of esbuild's analyzer UI (code/.storybook/bench/bundle-analyzer/) with HTML, CSS, and JavaScript files that provide treemap, sunburst, and flame chart visualizations
Enhanced Story Configuration: Refactors the benchmark stories to use a beforeEach hook instead of loaders, setting metafile data on globalThis for iframe communication rather than base64-encoding into URLs
Build System Improvements: Removes problematic postbuild scripts from multiple packages (cli-storybook, create-storybook, core) that were never executing properly, streamlining the build process
Configuration Updates: Modifies Vite builder to use configurable options.configDir instead of hardcoded .storybook, and updates Storybook's main config to serve the bundle analyzer UI as static files

The solution elegantly sidesteps the 2MB URL limitation that prevented analysis of large metafiles, enabling developers to analyze bundle statistics of any size within Storybook's development environment. This integrates with the existing metafile generation system while providing a more robust, self-contained solution.

Confidence score: 3/5

This PR introduces significant architectural changes that should work well but may have edge cases or integration issues
The removal of postbuild scripts that set executable permissions could break CLI functionality if not handled elsewhere
Files code/core/build-config.ts, code/lib/cli-storybook/build-config.ts, and code/lib/create-storybook/build-config.ts need more attention due to removed executable permission handling

…tafile generation in watch mode

JReinhold · 2025-07-23T09:25:28Z

+    const metafile = await allMetafiles[args.metafile]();
+    // this is read by the bundle-analyzer iframe via parent.metafile, in bundle-analyzer/index.js
+    globalThis.metafile = JSON.stringify(metafile);


the diff is annoying because the file was moved, this is the important new part

nx-cloud · 2025-07-23T09:25:37Z

View your CI Pipeline Execution ↗ for commit 0825667

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	48s	View ↗

☁️ Nx Cloud last updated this comment at 2025-07-23 19:10:44 UTC

Copilot

Pull Request Overview

This PR improves the metafile analysis functionality by refactoring the bundle generation script and implementing a local version of the esbuild analyzer UI. The changes enable support for large metafiles by eliminating the URL size limitations of the previous iframe-based approach that relied on the hosted esbuild analyzer.

Refactored bundle generation to fix postbuild script execution and generate metafiles in watch mode
Implemented local esbuild analyzer UI to replace external dependency on esbuild.github.io
Updated Storybook configuration to serve the local analyzer and reorganized story structure

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
scripts/build/utils/generate-bundle.ts	Major refactoring to fix postbuild execution and add metafile generation plugin
scripts/build/utils/entry-utils.ts	Added EntryType export and refactored type definitions
code/lib/create-storybook/build-config.ts	Removed chmod postbuild configuration
code/lib/cli-storybook/build-config.ts	Removed chmod postbuild configuration
code/core/build-config.ts	Removed chmod postbuild configuration
code/builders/builder-vite/src/vite-config.ts	Updated to use configDir instead of hardcoded '.storybook'
code/.storybook/main.ts	Updated stories path and added staticDirs configuration
code/.storybook/bench/bundle-analyzer/index.js	Added local esbuild analyzer implementation
code/.storybook/bench/bundle-analyzer/index.html	Added HTML structure for local analyzer
code/.storybook/bench/bundle-analyzer/index.css	Added styles for local analyzer
code/.storybook/bench/bench.stories.tsx	New story file with updated metafile loading approach
code/.storybook/bench.stories.tsx	Removed old bench stories file

greptile-apps

_{10 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

JReinhold · 2025-07-23T09:26:24Z

+  /*
+  Additional code for Storybook to load the metafile from the parent window.
+  The story sets this global variable to the metafile in a beforeEach hook.
+  */
+  if (parent.metafile) {
+    et(parent.metafile);
+  }


this is the part that loads the metafile in the analyzer. an iframe can access its parent's scope as long as it's same-origin

storybook-app-bot · 2025-07-23T10:26:22Z

Package Benchmarks

^{Commit: 0825667, ran on 23 July 2025 at 18:56:34 UTC}

No significant changes detected, all good. 👏

…ame, so that it matches {projectName} in NX config and is correctly calculated as part of the nx output cache

… sonda-analyzer

ndelangen · 2025-07-23T13:17:22Z

  features: {
    developmentModeForBuild: true,
  },
+  staticDirs: [{ from: './bench/bundle-analyzer', to: '/bundle-analyzer' }],


JReinhold added 4 commits July 23, 2025 10:14

remove unnecessary postbuild scripts

8845f5f

fix running postbuild scripts, refactor generate bundle to support me…

2c4c53e

…tafile generation in watch mode

fix adding storybook config dir to vite config allow list

31ea1a0

make esbuild analyzer local, support any size of metafile

d4c135f

JReinhold self-assigned this Jul 23, 2025

JReinhold added build Internal-facing build tooling & test updates ci:normal Run our default set of CI jobs (choose this for most PRs). labels Jul 23, 2025

JReinhold requested review from Copilot and ndelangen July 23, 2025 09:24

JReinhold marked this pull request as ready for review July 23, 2025 09:24

JReinhold commented Jul 23, 2025

View reviewed changes

Copilot AI reviewed Jul 23, 2025

View reviewed changes

Comment thread scripts/build/utils/generate-bundle.ts

Comment thread scripts/build/utils/generate-bundle.ts

Comment thread code/.storybook/bench/bundle-analyzer/index.js

Comment thread code/.storybook/bench/bench.stories.tsx

Comment thread code/.storybook/bench/bench.stories.tsx

greptile-apps Bot reviewed Jul 23, 2025

View reviewed changes

Comment thread code/.storybook/bench/bench.stories.tsx Outdated

JReinhold commented Jul 23, 2025

View reviewed changes

disable eslint for raw index.js analyzer file

9a0d6b3

JReinhold added 4 commits July 23, 2025 13:22

really fix lint this time

bd72ec7

change metafile output to match pacakge dir name instead of package n…

0b2ae49

…ame, so that it matches {projectName} in NX config and is correctly calculated as part of the nx output cache

bust nx cache

b194e30

Merge branch 'sb10/esm-only' of github.com:storybookjs/storybook into…

48e931b

… sonda-analyzer

ndelangen reviewed Jul 23, 2025

View reviewed changes

ndelangen approved these changes Jul 23, 2025

View reviewed changes

add comment about metafile location and nx

0825667

ndelangen merged commit dc7e86b into sb10/esm-only Jul 24, 2025
51 of 53 checks passed

ndelangen deleted the sonda-analyzer branch July 24, 2025 09:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Build: Support big metafiles in bundle analyzer#32109

Build: Support big metafiles in bundle analyzer#32109
ndelangen merged 10 commits into
sb10/esm-onlyfrom
sonda-analyzer

JReinhold commented Jul 23, 2025 •

edited by greptile-apps Bot

Loading

Uh oh!

JReinhold Jul 23, 2025

Uh oh!

nx-cloud Bot commented Jul 23, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot left a comment

Uh oh!

Uh oh!

JReinhold Jul 23, 2025

Uh oh!

storybook-app-bot Bot commented Jul 23, 2025 •

edited

Loading

Uh oh!

ndelangen Jul 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

JReinhold commented Jul 23, 2025 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Confidence score: 3/5

Uh oh!

JReinhold Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

nx-cloud Bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JReinhold Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

storybook-app-bot Bot commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

Uh oh!

ndelangen Jul 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JReinhold commented Jul 23, 2025 •

edited by greptile-apps Bot

Loading

nx-cloud Bot commented Jul 23, 2025 •

edited

Loading

storybook-app-bot Bot commented Jul 23, 2025 •

edited

Loading