返回博客

Storybook 4.1:极速需求

提速高达 300%,兼容性与便捷性增强

loading
Michael Shilman
@mshilman
最后更新于

Storybook 是全球广受欢迎的 UI 组件工作坊,深受 Airbnb、Github、Slack 和 Lyft 等工程团队的信赖。紧随重磅发布的Storybook 4.0 版本之后,我们很高兴推出 Storybook 4.1。这一次,我们在以下方面提高了标准:

  • ⚡️ 性能: 新架构,启动时间加快高达 300%
  • 🔌 兼容性: 支持任意版本 React 15.x+,完全兼容 CRA
  • 🔀 便捷性: 新增插件,可动态更新 CSS 资源

⚡️ 性能架构

Storybook 4.1 引入了一项由 Norbert de Langen 带来的重要改进,使得 Storybook 在冷启动和重新加载时能够提速高达 300%

4.1 将预览(用户代码)和管理器(Storybook 代码)拆分成两个进程,这提高了性能和 React 版本兼容性。

性能提升得益于一项架构更新,它将 Storybook 的预览和管理器拆分为两个独立的进程。

  1. 🖼 预览 是显示你的故事的区域
  2. 🛠 管理器 是用于在故事之间导航、管理插件等的外围 UI。

这是一项基础性改进,意味着我们可以固定在管理器中运行的 React 版本,并使用 Webpack DLL 插件“预编译”管理器 UI 的大部分内容。这在 4.1 中带来了惊人的性能提升,并为未来的优化打开了大门。

🔌 支持 React 15.x+

预览/管理器拆分的第二个好处是能够使用 React 15+ 运行 Storybook,这对我们的 React 用户来说是个好消息,他们每月总共下载 @storybook/react 超过 300 万次。

The Storybook 4.0 版本依赖于 React 16.3+ 的“react context”。这意味着如果你受限于旧版 React,你也就只能使用 Storybook 3.x。

既然 Storybook 的管理器和预览运行在独立进程中,管理器可以使用它所需的任意版本 React,而预览(运行用户组件)可以使用不同版本的 React。

Storybook 可以保持在技术前沿,而不会破坏那些使用旧版本的应用程序。

🔌 create-react-app

现在,在 Storybook 4.1 中,你可以无需任何自定义配置即可使用 create-react-app 的所有功能,包括 TypeScript 支持,这要归功于 Igor DavydkinBrody McKeeChad Fawcett

这项工作是由网络传奇人物 Dan AbramovBrad Frost 之间一段戏剧性的推特交流引发的。

从不畏惧挑战的 Igor 迅速解决了问题,使得 Storybook 开箱即用,并且一步到位地具备了未来兼容性。

这才是出色的客户服务!

🔀 动态 CSS

最后,Storybook 4.1 包含了由 Neville Mehta 开发的全新 CSS Resources 插件。现在你可以在运行时轻松切换 CSS 版本,这对于主题切换或简单探索组件的不同样式非常有帮助。

有关如何使用 CSS Resources 插件的更多信息,请参阅项目 README


升级到 Storybook 4.1

如果你正在使用 Storybook 4.0,升级到 4.1 将非常轻松。如果你还在使用 3.x,我们准备了一份 4.0 升级指南来帮助你。

如果你是 Storybook 新手,请查看 Storybook 教程,获取 React/Angular/Vue 的分步指南。或者直接在自己的项目中开始使用。

cd my-project
npx -p @storybook/cli sb init
yarn storybook

参与进来

有疑问或赞誉?请在 TwitterDiscordGithubSlack 或下方评论区打个招呼。请👏为这篇文章鼓掌并分享,以帮助更多人发现它。

感谢社区

Storybook 是超过 550 位社区贡献者的成果,并由一个由核心维护者组成的指导委员会发布。还要感谢 Open Collective 上的慷慨捐赠。Storybook 4.1 包含以下人员的代码贡献:@454de6e @adamraider @alex-fournier @atekon @bartwaardenburg @bertho-zero @cfleschhut @chadfawcett @chilicoder @chris-lock @cosmith @cyruszei @dandean @dumbnickname @elucaswork @emilio-martinez @eps1lon @ewolfe @gabrielcsapo @gaetanmaisse @geoffreyd @gongreg @hipstersmoothie @hmelenok @hypnosphi @igor-dv @inversion @jamiemason @jfgreffier @jrwebdev @keraito @kroeder @kwm14 @lflpowell @libetl @lucianbuzzo @mansoorbashabellary @mark-schaal @miquelmasrieramrf @mohamedmansour @motleydev @mrmckeb @myoxocephalus @ndelangen @niku @nm123github @noriste @okamuuu @pksunkara @plrthink @quetzaluz @ranyitz @ravikishorethella @robincsl @shaminmeerankutty @shilman @snyk-bot @spawnia @stephanemw @stevehanson @tarikhamilton @tobiasljungstrom @transitive-bullshit @wuweiweiwu @ximenean @xogeny @y-nk

加入 Storybook 邮件列表

获取最新新闻、更新和发布信息

7,180开发者(人数不断增加)

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被成千上万开发者用于生产环境的工具。远程优先工作模式。

查看职位

热门文章

Storybook 5.0

欢迎来到组件开发的未来!
loading
Michael Shilman

Storybook 5 迁移指南

轻轻松松迈向全新的卓越开发者体验
loading
Michael Shilman

Storybook 治理

支持开放的开源项目
loading
Michael Shilman
加入社区
7,180开发者(人数不断增加)
原因为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与进来博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别鸣谢 Netlify CircleCI