如何使 Storybook 速度提升 2-4 倍

Storybook 7.6 包含了大量的性能改进。大多数改进将在我们的下一个主要版本（Storybook 8.0）中成为默认设置，但您今天就可以手动选择启用它们。以下是如何开始！

⛳️ --test 标志，用于将测试构建速度提升 2-4 倍
🩺 React docgen 速度提升 2.2 倍
🧳 精简必要的插件
🌐 SWC，使 Webpack 项目速度提升 50%
🔬 @storybook/test，用于更精简和高性能的测试

使用 --test 标志构建速度提升 2-4 倍

如果您构建 Storybook 仅仅是为了测试目的，您可以通过跳过诸如 docgen 分析和文档编译之类的过程来显着提高构建速度。

为了帮助您做到这一点，我们为 Storybook build 引入了一个新的 --test 标志。它允许您创建一个精简的构建版本，其完成速度比正常情况快 2-4 倍。这可以与 Storybook Test Runner 或 Chromatic 一起使用，并将成为 Chromatic Visual Test Addon 的默认设置。

运行以下命令尝试您的首次测试构建

npx storybook build --test

FAQ: 我可以同时使用 --test 和 --coverage 标志吗？

--test 标志旨在尽可能快，因此它会移除已知会减慢构建速度且对于功能测试不必要的插件。

其中一个插件是 @storybook/addon-coverage，它与 Storybook Test Runner 结合使用，以收集您 story 的覆盖率信息。

如果您正在使用 addon-coverage 并针对您<0xC2><0xA0>构建的 Storybook 运行 Storybook Test Runner，则 --test 标志将剥离覆盖率信息。要配置 --test 构建以保留覆盖率信息（以略微降低构建速度为代价），请更新 .storbyook/main.js

// main.ts|js

export default {
  // ...
  build: {
    test: {
      disabledAddons: [
        '@storybook/addon-docs',
        '@storybook/addon-essentials/docs',
      ],
    },
  },
}

React docgen 速度提升 2.2 倍

通过 TypeScript 生成文档非常出色。它展示了如何在无需手动编写任何文档的情况下使用您的组件

Storybook 7 使用名为 react-docgen-typescript 的工具分析 React 组件。它可以根据 TypeScript 编译器的输出准确解析出您的所有 props。

然而，有一个问题：TypeScript 速度很慢。许多现代工具，如 esbuild 和 Speedy Web Compiler (SWC) 之所以速度快，正是因为它们移除了对 TS 的依赖。在我们的测试中，仅禁用基于 TS 的 docgen 就将 Storybook 构建速度提高了 25% 到 50%！

在 Storybook 8 中，我们将默认使用 react-docgen。它基于简单的 AST 处理，不使用任何 TS，因此速度明显更快。它无法很好地处理某些模式，但在大多数情况下，速度是值得的。

立即在您的 Storybook 7.6 React 项目中使用以下配置尝试此功能

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  typescript: {
    reactDocgen: 'react-docgen', // or false if you don't need docgen at all
  },
};

export default config;

精简 addon-essentials

Storybook 的 addon-docs 包允许您自动生成文档或使用 MDX 手动编写文档。这些文档页面可以包含许多需要打包的组件，这会增加 bundle 大小和 Storybook 的构建时间。

如果您不使用 addon-docs，您可以使用以下配置将其从 addon-essentials 中移除。在我们的测试中，仅此更改就将 Storybook 的构建时间缩短了 25%。

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  stories: [
    // make sure you don't have MDX entries
  ],
  addons: [
    // Before
	  //   '@storybook/addon-essentials',
		// After
		{
	   	name: '@storybook/addon-essentials',
		  options: { docs: false },
		},
	],
};

export default config;

使用 Webpack？启用 SWC

在 Storybook 7.6 中，您可以通过从 Babel 切换到 SWC，将 Webpack 项目的启动时间缩短 50% 甚至更多。

Storybook 7.6 将 SWC 设置为所有新的 Storybook Webpack 项目（Angular 除外）的默认设置。它还修复了 SWC 对 Preact 和 React fast-refresh 的支持。

如果使用基于 Webpack 的框架，请更新 .storybook/main.ts 中的构建器配置

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: {
    name: '@storybook/your-framework', // react-webpack5|next|vue-webpack5|etc
    options: { builder: { useSWC: true } }
  }
};

注意：--test 标志不会默认启用 SWC。这是因为如果您正在使用 Babel 插件（例如 Emotion 插件），可能需要进行额外的更改。

一个价格，获得两个测试包

Storybook 7.6 用 @storybook/test 替换了 @storybook/jest 和 @storybook/testing-library 包。它更精简、体积更小，现在基于 Vitest 而不是 Jest。它预先捆绑了所有依赖项，这通过减少 bundler 的工作量来提高性能。在 我们的 Mealdrop 示例项目 中，@storybook-test 将构建时间缩短了 10%。

要开始使用，请使用您的包管理器安装该插件

# Install the addon with your package manager

npm install -D @storybook/test@next
pnpm add -D @storybook/test@next
yarn add -D @storybook/test@next

然后，更新您的 stories

- import { expect } from '@storybook/jest';
- import { within, userEvent } from '@storybook/testing-library';
+ import { within, userEvent, expect } from '@storybook/test';

其他新闻...

Storybook 8.0 之路已经开始

我们下一个主要版本 Storybook 8.0 的第一个版本现在以 alpha 版形式提供给您试用。通过运行 npx storybook@next upgrade --prerelease 进行升级。在接下来的几个月中，我们将分享 8.0 版本中的所有优点。在社交媒体 (Twitter/LinkedIn/Threads)、GitHub 或 我们的新闻邮件上关注我们以获取更新，或者查看发布计划

Storybook 8 发布计划 · storybookjs/storybook · Discussion #25276

Hello Storybook Community, Storybook 8 正在进行中！此版本包含比以前的主要版本更少的重大更改，我们优先考虑从 7.x 到 ... 的平滑迁移体验

GitHubstorybookjs

用于 React Server Components 的 Storybook

在我们的 Storybook 8.0 系列文章的第一篇中，我们回答了社区最常见的请求之一：Storybook 对 React Server Components 的支持。此实验性解决方案使您能够在 Storybook 中测试 RSC，方法是在客户端渲染您的服务器组件，并使用 mocks 模拟 Node。

用于 React Server Components 的 Storybook

通过升级到 Storybook 8.0 alpha 版，在 Storybook 中使用 RSC

Storybook 博客Michael Shilman

Chromatic Visual Test Addon 进入私有 Beta 版

超过 1,000 名开发人员已经注册抢先体验 Chromatic Visual Test Addon，它为您的 Storybook 带来了 1 键可视化测试。了解有关私有 Beta 版的更多信息并立即获取！

Chromatic Visual Test addon 进入私有 Beta 版

使用一键测试调试 story 的视觉变化

Storybook 博客Dominic Nguyen

节日快乐！

最后，我们想祝大家节日快乐。2023 年对于 Storybook 来说是意义重大的一年，而 2024 年注定会更加强大。我们将在下周分享一篇关于 Storybook 在 2024 年的计划的文章，请务必关注此空间。

感谢您今年成为 Storybook 社区的一份子。没有您，我们做不到这一切！