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 包含数千个故事。

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

我们重点关注的第一个领域是 Storybook 的核心 UI。搜索和导航经过全面改造，以提升速度。如果你经常使用 Storybook，你会对结果感到满意

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

设计不仅更高效，实现也经过精心打造，即使面对包含数百个组件的大型组件库，也能保持流畅和响应。

要了解新 UI 的概览，请查看特色文章：新的组件查找器和侧边栏。

启动和构建性能

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

告别 Webpack DLLs

Webpack DLLs 是一个权衡方案，它以增加包大小和引发兼容性问题为代价来缩短构建时间。

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

Storybook 应用缓存

Storybook 的 UI 由两个独立的 Webpack 进程构建。管理器 (manager) 是 Storybook 的 UI，提供侧边栏、导航和插件面板。预览 (preview) 是显示用户故事和组件的 iframe。

在开发过程中，预览经常随着你的代码构建和刷新而变化。但是管理器只在你重新配置 Storybook 时发生变化。

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

注意：由于预览和管理器并行构建，这不一定能在启动时节省完整的 10-20 秒，但节省是可观的。

异步加载器

6.1 引入了加载器 (loaders)：在故事渲染前运行的异步函数。

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

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

我们计划在 Storybook 的内部使用加载器作为持续性能工作的一部分。但我们也暴露了 API，允许用户进行自己的优化。更多信息，请阅读文档。

React 17 兼容性，支持快速刷新

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

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

快速刷新

Storybook 6.1 现在支持 React 快速刷新，提供流畅、现代的 React 开发体验。快速刷新是 React Hot Loader 的继任者。它保留运行时状态，并在你编辑组件时尽量少地重新渲染页面。

严格模式

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

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

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

还有更多

Storybook 在各个层面持续改进。6.1 的其他亮点包括

✅ Yann Braga 的 Addon-backgrounds 全面改造。
✅ Tomas Nygren 的更好的更新通知。
✅ Gaetan Maisse 的 Angular 11 支持。
✅ Shota Fuji 的 Vue 的动态源渲染。
✅ Gert Hengeveld 的侧边栏单故事提升。
✅ Ernie Francis 的 Svelte 的自动生成控件。
✅ Danny Williams 的在 CLI 中恢复 React Native 支持。

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 新闻，或订阅我们的邮件列表。