JReinhold
commented
1 week ago Based on the baseline calculations, I think it's fair to skip the following packages along with @storybook/addon-essentials for now, because they are "tiny" compared to the rest of the packages here:
š§āš¤āš§ Who: @JReinhold and @ndelangen
This is a tracking issue for the Reduce install footprint š¾ project. The purpose of this issue is to keep tracking of the overall status of the project and tasks, and plan everything around it.
See also #29072 which is a spike we'll be doing as part of this project to investigate how to move Storybook towards publishing ESM-only packages.
š¢ Want to help?
Make sure you read this issue thoroughly to understand what we want to achieve and how. Do not ask to be assigned to certain tasks, just do them. We won't "reserve" anything to potential contributors, that system rarely work. Help out with what you want, and report findings in this issue, eg. if you've identified potential optimisations in a package. If you open pull requests with your work make sure to reference this issue and tag @JReinhold.
ā ļø Problem
One of the biggest complaints about Storybook is that it's a big and heavy dependency to add to your project. There are muliple ways to interpret the frustration, but one of the most impactful improvements we can make is to reduce the install size of the core Storybook experience.
Throughout the current Storybook 8 releases we've already managed to cut the size significantly, eg. via #27039 and #28519. But there is plenty more work to be done - especially outside the core package - that will enable us to shrink Storybook even further.
š Goals
The high-level goals of this project is to:
initprocess, such asstorybook, the builders (Vite/Webpack), the renderers (React, Svelte, etc.) and the default addons.This means we are not focusing on performance improvements nor reducing the size of a built Storybook. We still love those improvements, but they are not the major focus here.
š Resources
š Spreadsheet with package stats
š¬ Methodology
Storybook is a complex mesh of over 30 packages, therefore analysing "Storybook's" install size will be tackled from two angles:
node_modulessize and the amount of dependencies added to the project. The upside of this perspective is that it directly focuses on the experience our users get. The downside of this approach - as with most E2E tests - is that it can be "flaky" because a lot of outside factors can impact the project's install size and dependency count. It's also a coarse metric, detecting significant size increases in sandboxes doesn't really help us identify where the increase is coming from. This brings us to...@storybook/react-vitedoesn't help if that dependency is still installed by@storybook/core.Therefore we must keep both metrics in mind, to ensure we improve the experience for the end-user while still getting actionable results on the lower level.
We'll use a breadth-first approach when doing the optimisations across the packages. At the start of the project all, the integration packages have a single task (which also applies to the core): Identify potential optimisations. We'll do that first across all the packages on a high-level, to identify common patterns and find big wins first. This ensures that we don't laser focus on eg. removing 15 KB from
@storybook/reactwhen we could instead have removed 12 MB from@storybook/vue3-vite. With that said, there are already known big wins in the core packages that might get a higher priority than looking into some of the integration packages.There are many approaches and tools to optimising package's size and dependencies and it's not a one-size-fits-all. https://e18e.dev/guide/cleanup.html is a good primer on how to approach it. At a high-level we'll:
We can take
@storybook/coreas an example:@storybook/core(not currently public) shows that Prettier makes up a big part of the bundled output. Can we replace it, or remove it? See #29084š© Milestones
š Baselines and Bechmarks
See spreadsheet detailing all the packages.
š§ Optimisations
This section includes all the actual package optimisations that we want to make. The list is highly dynamic and should change a lot during the project.
š¦ Core Packages
š§© Integration Packages
```[tasklist] ### `@storybook/builder-vite` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/builder-webpack5` - [ ] Identify potential optimisations ```Builders
```[tasklist] ### `@storybook/react` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/vue3` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/web-components` - [ ] Identify potential optimisations ```Renderers
```[tasklist] ### `@storybook/react-vite` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/react-webpack5` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/nextjs` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/experimental-nextjs-vite` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/angular` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/vue3-vite` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/vue3-webpack5` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/sveltekit` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/svelte-vite` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/web-components-vite` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/web-components-webpack5` - [ ] Identify potential optimisations ```Frameworks
```[tasklist] ### `@storybook/addon-docs` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/blocks` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-interactions` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-actions` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/test` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-controls` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-measure` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-outline` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-backgrounds` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-toolbars` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-viewport` - [ ] Identify potential optimisations ``` ```[tasklist] ### `@storybook/addon-onboarding` - [ ] Identify potential optimisations ```Addons
š ļø Supporting Tooling
Ideally we'd want to set up some tooling that allows to easily inspect package and dependency sizes, to make it easier to optimise these areas. It's still TBD what shape or form these could take.
Related: https://github.com/evanw/esbuild/issues/3909
š¤· Misc