Storybook 臃肿？已修复。

我们最响亮的批评是“Storybook 臃肿。”这句话刺痛了我们，因为它属实。Storybook 拥有强大的功能集，支持所有主流 JavaScript 框架。但这同时也使得优化变得棘手。

在成熟的开源项目中，臃肿问题比任何单一问题都更为普遍。这篇文章将分享我们如何彻底改革 Storybook 9 的包，以实现更快的安装速度、更小的锁定文件和更少的升级烦恼。

• 🗜️ 安装大小减少超过 50%
• 🧹 彻底改革内部依赖结构
• 📦 将核心插件移入
• 🪶 支持仅开发人员使用的“最小化”安装

特别感谢 e18e Ecosystem Performance 为我们的努力注入了强大的动力。

偏爱视频？我们曾就此主题举行过一场现场会议。

臃肿问题

没有一劳永逸的解决方案来解决臃肿问题。它可以以多种尺寸和形状出现。庞大的 node_modules。不必要的传递依赖。项目依赖与 Storybook 之间的冲突。嘈杂的 CLI 输出。等等。

臃肿包含所有这些方面。更糟糕的是，开发人员已经习惯了 Storybook 的沉重。对于 Storybook 9，我们需要一个整体解决方案来打破先前的期望。

我们如何解决臃肿问题

Storybook 9 基于以下原则

• 更少的包
• 替换重量级依赖
• 预打包所有内容
• 只安装您需要的

更少的包

Storybook 9 在我们的包结构方面进行了重大改进。包边界强制执行模块化，但它们也导致了各种形式的臃肿，例如重复的依赖项以及用户 package.json 中更多的依赖项。为了解决这个问题，我们合并并减少了 Storybook 包的数量。

现在，要最少地使用 Storybook，您需要一个核心包 storybook，以及一个框架包 @storybook/nextjs-vite、@storybook/angular、@storybook/sveltekit 等。

以前存在于插件中的功能（例如用于调整组件属性的 Controls）已合并到 Storybook 的核心中。其他功能，例如 MDX 和自动生成的组件文档，已合并到一个包 @storybook/addon-docs 中。所有包都包含一个对 storybook 的对等依赖。

// package.json
{
  @storybook/addon-docs
-  @storybook/addon-essentials
-  @storybook/addon-interactions
  @storybook/addon-onboarding
-  @storybook/blocks
-  @storybook/react
  @storybook/react-vite
-  @storybook/test
+  @storybook/addon-vitest
  eslint-plugin-storybook
  storybook
}

这种简化的包结构可以防止在升级 Storybook 时出现依赖地狱。它还允许我们预打包，这是我们方法中的下一步。

积极预打包

Storybook 积极预打包依赖项，因为 JS 包管理器可能会搞砸一切：不同的版本、不同的安装、锁定文件、意外的冲突。

什么是预打包？这意味着在核心 storybook 包中提供已知良好的关键包版本，这样您就不需要在安装时自行解析它们。这大大减少了安装错误、不匹配和依赖冲突。它还展平了依赖项树，并将包中您不使用的部分通过 tree-shaking 去除，这通常会导致大幅减小尺寸。

查找并替换重量级依赖

虽然修复 Storybook 的包结构是朝着正确方向迈出的一步，但我们也尽可能用轻量级的替代方案替换了我们自己的依赖项。e18e 的“清理”资源有助于识别优化机会并推荐更小的包。这使我们的包大小减少了数十兆字节。

例如，使用 Polka (67KB) 而不是 Express (2.2MB) 立即削减了 2MB，并提供了更快的最终用户性能。

只安装您需要的：最小化的“仅开发人员”Storybook

如果您只想编写故事而不需要自动文档和组件测试等功能，我们增加了一个选项来安装最小化的、仅开发人员使用的 Storybook。这允许您进一步减少安装大小和 package.json 依赖项。

立即试用 Storybook 9

我们致力于使 Storybook 成为世界上最快、最精简的前端工作空间。作为维护者，我们不断平衡稳定性、性能以及与更广泛的 JavaScript 生态系统的同步。

Storybook 9 引入了令人难以置信的新组件测试功能，同时将包大小减半。在新项目中尝试一下

npm create storybook@latest

如果您已经有一个现有的 Storybook 项目，请先将其升级到 Storybook 9。使用我们的自动化迁移向导来帮助您完成整个过程

npx storybook@latest upgrade

我们还创建了一个 迁移指南 来帮助填补空白。