返回博客

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,这对我们每月总共下载 @storybook/react 超过 300 万次的 React 用户来说是个好消息。

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

参与贡献

有疑问或想点赞?在 Twitter, Discord, Github, Slack 上或在下面的评论中打个招呼。请 👏 为这篇文章鼓掌并分享,以帮助更多人发现它

感谢社区

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 邮件列表

获取最新的新闻、更新和发布

6,730位开发者,持续增加中

我们正在招聘!

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

查看职位

热门文章

Storybook 5.0

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

Storybook 5 迁移指南

轻松跃升至美好的全新开发者体验
loading
Michael Shilman

Storybook 治理

支持开放源代码
loading
Michael Shilman
加入社区
6,730位开发者,持续增加中
为何为何选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与贡献博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI