Maintenance: Enable syntax minification for dead code elimination by mrginglymus · Pull Request #33001 · storybookjs/storybook

mrginglymus · 2025-11-11T08:10:45Z

What I did

SB 10 does not minify code. Whilst this makes debugging considerably easier, it also means that dead code elimination is not applied (e.g. conditional blocks protected by compile-time constants like process.env.NODE_ENV).

Thankfully, esbuild provides three separate options for minification. Enabling minifySyntax will apply dead code elimination, as well as a couple of other relatively harmless optimisations. A brief scan suggests these include things like:

moving var declarations to a single statement
compressing return statements
replacing true with !0
removing unecessary {} around single-line blocks

However, critically, it preserves whitespace and identifiers.

This also appears to give you a small (~10%) saving in runtime code, though much of this may get eaten by gzip

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

Please ensure, the output dist of the storybook packages (just pick a few) (and a few entry-points of core) contain human readable code.

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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Chores
- Build output now produces more compact/minified syntax for smaller bundles and faster load times.
- Tooling dependencies updated to permit newer bundler versions and refreshed icon package versions.
Bug Fixes
- Error reporting now includes explicit, consistent error names so messages and diagnostics show clearer named error identities.

nx-cloud · 2025-11-11T08:13:10Z

View your CI Pipeline Execution ↗ for commit 0d98abb

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

☁️ Nx Cloud last updated this comment at 2025-11-13 10:25:46 UTC

ndelangen · 2025-11-12T10:58:33Z

@mrginglymus It does not look like the are actually any size-changes detected?

mrginglymus · 2025-11-12T12:19:37Z

This branch might just be out of date, but next is showing 3.4mb for globals-runtime.js, and this branch showing 2.8mb.

Even allowing for a different set of features, react-dom is down from 235.6kb to 232.9kb,

not sure where the bulk of that is coming from then...

oh - next has @react-aria in it, which this branch doesn't

JReinhold · 2025-11-12T12:37:27Z

I'm okay with this change

storybook-app-bot · 2025-11-12T12:46:47Z

Package Benchmarks

^{Commit: 0d98abb, ran on 21 November 2025 at 11:14:56 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	2	2	0
Self size	181 KB	414 KB	🚨 +232 KB 🚨
Dependency size	2.97 MB	2.97 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-vitest`

	Before	After	Difference
Dependency count	2	6	🚨 +4 🚨
Self size	376 KB	441 KB	🚨 +66 KB 🚨
Dependency size	338 KB	570 KB	🚨 +232 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-vite`

	Before	After	Difference
Dependency count	17	11	🎉 -6 🎉
Self size	304 KB	291 KB	🎉 -13 KB 🎉
Dependency size	2.00 MB	1.30 MB	🎉 -701 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	191	187	🎉 -4 🎉
Self size	75 KB	66 KB	🎉 -9 KB 🎉
Dependency size	32.19 MB	31.98 MB	🎉 -215 KB 🎉
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	39	44	🚨 +5 🚨
Self size	19.65 MB	21.70 MB	🚨 +2.05 MB 🚨
Dependency size	16.40 MB	17.16 MB	🚨 +755 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	191	187	🎉 -4 🎉
Self size	118 KB	114 KB	🎉 -3 KB 🎉
Dependency size	30.31 MB	30.00 MB	🎉 -317 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	195	191	🎉 -4 🎉
Self size	15 KB	15 KB	0 B
Dependency size	28.91 MB	28.69 MB	🎉 -224 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	20	14	🎉 -6 🎉
Self size	22 KB	22 KB	0 B
Dependency size	2.34 MB	1.63 MB	🎉 -715 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	537	533	🎉 -4 🎉
Self size	645 KB	645 KB	🚨 +230 B 🚨
Dependency size	59.13 MB	58.91 MB	🎉 -225 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	128	124	🎉 -4 🎉
Self size	1.12 MB	1.12 MB	🚨 +224 B 🚨
Dependency size	21.95 MB	21.72 MB	🎉 -229 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	20	14	🎉 -6 🎉
Self size	13 KB	13 KB	0 B
Dependency size	2.33 MB	1.61 MB	🎉 -715 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	160	156	🎉 -4 🎉
Self size	30 KB	30 KB	🎉 -1 B 🎉
Dependency size	23.13 MB	22.90 MB	🎉 -231 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	118	114	🎉 -4 🎉
Self size	35 KB	35 KB	🎉 -130 B 🎉
Dependency size	19.75 MB	19.52 MB	🎉 -229 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	277	273	🎉 -4 🎉
Self size	24 KB	24 KB	🚨 +12 B 🚨
Dependency size	44.08 MB	43.85 MB	🎉 -225 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	203	199	🎉 -4 🎉
Self size	16 KB	16 KB	0 B
Dependency size	33.45 MB	33.23 MB	🎉 -224 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	24	19	🎉 -5 🎉
Self size	56 KB	56 KB	🚨 +12 B 🚨
Dependency size	27.00 MB	26.75 MB	🎉 -255 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	25	20	🎉 -5 🎉
Self size	56 KB	56 KB	🎉 -24 B 🎉
Dependency size	27.06 MB	26.80 MB	🎉 -255 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	114	109	🎉 -5 🎉
Self size	35 KB	36 KB	🚨 +224 B 🚨
Dependency size	44.15 MB	43.90 MB	🎉 -254 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	21	15	🎉 -6 🎉
Self size	19 KB	19 KB	0 B
Dependency size	2.37 MB	1.65 MB	🎉 -715 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	173	188	🚨 +15 🚨
Self size	773 KB	838 KB	🚨 +64 KB 🚨
Dependency size	66.62 MB	71.38 MB	🚨 +4.76 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	166	170	🚨 +4 🚨
Self size	30 KB	30 KB	🎉 -11 B 🎉
Dependency size	65.19 MB	67.91 MB	🚨 +2.72 MB 🚨
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	40	45	🚨 +5 🚨
Self size	999 KB	1.45 MB	🚨 +453 KB 🚨
Dependency size	36.05 MB	38.86 MB	🚨 +2.81 MB 🚨
Bundle Size Analyzer	node	node

ndelangen · 2025-11-12T13:19:14Z

@mrginglymus I tried to add another thing to this PR, but git told me I'm not authorized for some reason?

https://github.com/storybookjs/storybook/pull/33028/files

mrginglymus · 2025-11-12T14:10:08Z

@mrginglymus I tried to add another thing to this PR, but git told me I'm not authorized for some reason?

https://github.com/storybookjs/storybook/pull/33028/files

@ndelangen whoops! sorry, I must have unchecked the allow edits by maintainers...

ndelangen · 2025-11-12T14:26:59Z

I added a few more things to this PR:

regen lockfile
remove the keepnames option, reducing size further

I had to add a name property to the StorybookError class for that.

ndelangen · 2025-11-12T14:37:38Z

It's odd how the size reporting is completely different from when I had the fork PR open 😕

ndelangen · 2025-11-12T16:38:55Z

@mrginglymus I'm looking at the dist, and there are plenty of unused variables:

mrginglymus · 2025-11-12T21:03:12Z

Those ones from polished are to be expected; the calls to curry aren't marked as /* @__PURE__ */ so esbuild won't remove them. What's odd is that adding that annotation also doesn't appear to fix it...

mrginglymus · 2025-11-12T21:18:47Z

You can work around this with deep imports (import darken from 'polished/lib/color/darken') but it won't make a huge difference.

…ackages

Enable syntax minification for dead code elimination

1517a97

yannbf added maintenance User-facing maintenance tasks performance issue ci:normal labels Nov 11, 2025

This comment was marked as spam.

Sign in to view

yannbf changed the title ~~Enable syntax minification for dead code elimination~~ Maintenance: Enable syntax minification for dead code elimination Nov 11, 2025

yannbf requested a review from JReinhold November 11, 2025 15:17

yannbf assigned JReinhold Nov 11, 2025

ndelangen added ci:merged Run the CI jobs that normally run when merged. and removed ci:normal labels Nov 12, 2025

ndelangen assigned ndelangen and unassigned JReinhold Nov 12, 2025

Merge branch 'next' into pr/mrginglymus/33001

c893150

ndelangen approved these changes Nov 12, 2025

View reviewed changes

ndelangen added 2 commits November 12, 2025 14:15

we do not need this anymore, now that we're no longer minify

1d9109d

remove comment

b477d5e

ndelangen added 4 commits November 12, 2025 14:23

regen lockfile

4ee1283

fix snapshots

cbbeac0

sync esbuild versions

6f81144

give errors an explicit name property, that cannot be compiled away

1504c34

ndelangen added 2 commits November 12, 2025 15:19

fix

5176096

Merge branch 'next' into minify-syntax

50d8e1c

ndelangen requested a review from shilman November 12, 2025 14:24

This comment was marked as spam.

Sign in to view

Update @storybook/icons dependency to version 2.0.0 across multiple p…

0d98abb

…ackages

ndelangen merged commit b13be59 into storybookjs:next Nov 13, 2025
73 checks passed

github-actions bot mentioned this pull request Nov 13, 2025

Release: Prerelease 10.1.0-alpha.11 #33032

Merged

7 tasks

mrginglymus deleted the minify-syntax branch November 13, 2025 10:33

ndelangen added the needs qa Indicates that this needs manual QA during the upcoming minor/major release label Nov 21, 2025

yannbf removed the needs qa Indicates that this needs manual QA during the upcoming minor/major release label Nov 25, 2025

coderabbitai bot mentioned this pull request Dec 8, 2025

Addon-Vitest: Isolate error reasons during postinstall #33295

Merged

8 tasks

This was referenced Dec 20, 2025

[Bug]: crashes with browserslist baseline queries #33401

Open

[Bug]: npx create storybook with CRA fails to run due to ESLint plugin conflict #33413

Open

coderabbitai bot mentioned this pull request Feb 2, 2026

CLI: Support addon-vitest setup when --skip-install is passed #33718

Merged

8 tasks

Uh oh!

Comments

Conversation

mrginglymus commented Nov 11, 2025 • edited by ndelangen 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

Summary by CodeRabbit

Uh oh!

nx-cloud bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as spam.

ndelangen commented Nov 12, 2025

Uh oh!

mrginglymus commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JReinhold commented Nov 12, 2025

Uh oh!

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

Uh oh!

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-vitest

@storybook/builder-vite

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/ember

@storybook/html-vite

@storybook/nextjs

@storybook/nextjs-vite

@storybook/preact-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/vue3-vite

@storybook/web-components-vite

@storybook/cli

@storybook/codemod

create-storybook

Uh oh!

ndelangen commented Nov 12, 2025

Uh oh!

mrginglymus commented Nov 12, 2025

Uh oh!

ndelangen commented Nov 12, 2025

Uh oh!

This comment was marked as spam.

Uh oh!

ndelangen commented Nov 12, 2025

Uh oh!

ndelangen commented Nov 12, 2025

Uh oh!

mrginglymus commented Nov 12, 2025

Uh oh!

mrginglymus commented Nov 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mrginglymus commented Nov 11, 2025 •

edited by ndelangen

Loading

nx-cloud bot commented Nov 11, 2025 •

edited

Loading

mrginglymus commented Nov 12, 2025 •

edited

Loading

storybook-app-bot bot commented Nov 12, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-vitest`

`@storybook/builder-vite`

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/ember`

`@storybook/html-vite`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/preact-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/vue3-vite`

`@storybook/web-components-vite`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`