Storybook 6.1

为快速 UI 开发而设计

Michael Shilman

2020 年 11 月 23 日 — @mshilman

上次更新 2020 年 11 月 23 日

Storybook 是行业标准的 UI 组件工坊。它组织组件及其状态，以构建 UI 开发、测试和文档的结构。Twitter、Slack、Airbnb、Shopify、Stripe 和 Microsoft 的团队都在使用它。

随着 Storybook 越来越受欢迎，公司正在其中构建比以往任何时候都多的组件。原子组件、完整的页面以及介于两者之间的一切。

当您处理数百个组件时，性能就成了一个问题。这就是 Storybook 6.1 专注于提高性能的原因

🔍 快速搜索和导航用户体验
⚡️ 基础性能改进
⚛️ 兼容 React 17 和快速刷新

对速度的需求

当 Storybook 在 2016 年发布时，热模块重载 (HMR) 还是一个新兴事物。Webpack 处于领先地位。组件库很小。

从那时起，生态系统发生了变化。HMR 已很常见。有很多 Webpack 的替代品。生产环境的 Storybook 包含数千个 stories。

开发人员在更大的规模上和大型生产用例中依赖 Storybook。从 Storybook 6.1 开始，我们的首要任务是性能。我们正在毫不掩饰地整合 JavaScript 社区中最新和最棒的技术，以使 Storybook 更快。

我们关注的第一个领域是 Storybook 的核心 UI。搜索和导航已为了速度而进行了彻底改造。如果您经常使用 Storybook，您会对结果感到高兴

🔍 使用模糊搜索快速查找组件
🔄 在最近打开的组件之间跳转
🔭 展开和折叠所有节点
⚡️ 通过键盘导航实现更流畅的 UI

不仅设计更高效，而且实现也经过精心设计，即使面对拥有数百个组件的大型组件库，也能保持流畅和响应迅速。

要了解新 UI 的概况，请查看功能帖子：新的组件查找器和侧边栏。

启动和构建性能

我很高兴报告 Storybook 在启动时间、包大小和加载时间方面的核心构建性能方面取得的早期胜利。以下结果是在运行 Create React App v4、Storybook Design System 和 Reaviz 的 2019 Macbook Pro 上编译的。

告别 Webpack DLL

Webpack DLL 是一种权衡，它以增加包大小和暴露兼容性问题为代价来减少构建时间。

我们移除了 DLL，以大幅减少包大小，与以前的版本相比。这意味着静态构建的下载速度比以前快得多。例如，与 6.0 相比，Storybook Design System 的静态构建大小减少了 66%。

Storybook 应用缓存

Storybook 的 UI 由两个独立的 Webpack 进程构建。manager 是 Storybook 的 UI，它提供侧边栏、导航和插件面板。preview 是显示用户 stories 和组件的 iframe。

在开发过程中，预览通常会随着您的代码构建和刷新而发生变化。但 manager 仅在您重新配置 Storybook 时才会更改。

在 6.1 中，Storybook 预构建并缓存 manager。这意味着您的计算机不必在每次运行 Storybook 时都花费时间构建 manager。这节省了 10-20 秒的 CPU 时间。

注意：由于 preview 和 manager 并行构建，这不一定能在启动时完全节省 10-20 秒，但节省量仍然很大。

异步加载器

6.1 引入了loaders：在 story 渲染之前运行的异步函数。

想要减小您的包大小吗？将您的组件拆分到不同的包中，并在初始页面加载后加载它们，以获得更快的启动体验。

想要重用远程 API 端点上可用的现有 fixture 数据吗？在 story 渲染之前“及时”加载数据。

我们计划在 Storybook 的内部机制上使用 loaders，作为持续性能工作的一部分。但我们也公开了 API，允许用户推出他们自己的优化。有关更多信息，请阅读文档。

兼容 React 17 和快速刷新

Storybook 6.1 还支持 React 17 以及快速刷新和严格模式。React 17 是 React 的非破坏性主要版本，它为下一轮创新奠定了基础。它包括一个 JSX 转换，允许您编写 JSX 而无需在顶部导入 React。Storybook 6.1 支持新的 React 功能。

注意：Storybook 6.0 与 React 17 不兼容。

快速刷新

Storybook 6.1 现在支持 React Fast Refresh，以获得流畅、现代的 react 开发体验。Fast Refresh 是 React Hot Loader 的继任者。它保留运行时状态，并在您编辑组件时尝试尽可能少地重新渲染页面。

严格模式

在严格模式下开发是 React 的最佳实践，因为它有助于团队更早地发现错误。虽然这不完全是 Storybook 性能的改进，但这是 Material UI 团队要求的开发人员体验升级。

要启用快速刷新和严格模式，请编辑 .storybook/main.js

module.exports = {
  reactOptions: {
    fastRefresh: true,
    strictMode: true,
  },
};

以及更多

Storybook 在各个层面都在不断改进。6.1 的其他亮点包括

6.1 包含数百个更多修复、功能和调整。浏览与 6.1.0-* 匹配的更新日志，以获取完整的更改列表。

1 分钟安装

将现有的 Storybook 项目升级到 6.1

npx sb upgrade

如果您是从 5.x 或更早版本升级而来，请查看 Storybook 6 迁移指南。

或者，对于全新安装，将 Storybook 引导启动到现有应用中

npx sb init

参与进来

专业的 UI 开发人员每天都依赖 Storybook。我们的目标是简化常用流程，以便您可以用更少的工作构建更多内容。

侧边栏由 Gert Hengeveld、Norbert de Langen 和 Dominic Nguyen 开发。Gert Hengeveld、Norbert de Langen、Tom Coleman 和 Michael Shilman (我！) 进行了性能改进。React 改进由 Clement Dungler、Gaetan Maisse、Brody McKee、Yann Braga 和 Michael Shilman 完成。

Storybook 6.1 由以下贡献者带给您

@aach @activenode @andezzat @andre-brdoch @andrewleedham @andypattenden @ankon @anthony-hull @awayken @benforeva @blackfenix2 @bme5150 @cabello @ccpu @chequernoel @clementprevot @connormiha @daleseo @danielruf @dbendaou @dej611 @domyen @dzwarg @edemagbenyo @fberthelot @frassinier @fritzfde @g1eny0ung @gaetanmaisse @ghengeveld @guilhermewaess @hipstersmoothie @hjain13 @ho1234c @holylander @hoop71 @jacubsmith @jamesgeorge007 @jaronheard @jimmydalecleveland @jonniebigodes @jonspalmer @jsoref @julioc @kahirokunn @kkoo95 @koop @kouts @kylesuss @larbisahli @lawvs @literalpie @luisferreira90 @marklb @marksmccann @marvinzeising @matharden @matheuspiment @mathieudutour @mattrothenberg @merceyz @mrmckeb @ndelangen @neilyio @nfriend @nknapp @noahlaux @olliecurtis @pchr-srf @phated @philmuze @pocka @profanis @rangle-brendan @remorses @roblan @romain-blatrix @ryuno-ki @s1ngs1ng @saikumar221 @saniok017 @sanskar-p @shackless @shilman @sleeper @stabback @stephanbijzitter @tanayv @tay1orjones @thibaudav @tmeasday @tomastomaslol @tooppaaa @toshi1127 @twerske @uhoh-itsmaciek @uoon-dev @whoisryosuke @wibron @winkervsbecks @y-nk @yama-tomo @yannbf @ykamez @zahratee @zeckdude @zolk @zouyoushun

该项目由 1,184+ 位开源贡献者维护，并由顶级的维护者指导委员会指导。如果您有兴趣贡献，请在 GitHub 上查看 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐赠。在 Discord 中与我们聊天 — 通常会有维护者在线。在 Twitter 上以及通过注册我们的邮件列表，及时了解 Storybook 的最新消息。