如何让 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 视觉测试插件的默认设置。

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

npx storybook build --test

常见问题：我可以结合使用 --test 和 --coverage 标志吗？

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

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

如果您正在使用 addon-coverage 并针对您构建的 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 手动编写。这些文档页面可以包含许多需要打包的组件，这会增加打包大小和 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 中更新您的 builder 配置

// .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/jest 和 @storybook/testing-library 包替换为 @storybook/test。它更精简，比之前更小，现在基于 Vitest 而不是 Jest。它预打包了所有依赖项，通过减少打包器的工作量来提高性能。在我们的示例 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

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

GitHubstorybookjs

用于 React Server Components 的 Storybook

在我们的 Storybook 8.0 第一篇文章中，我们回答了社区中最常见的一个请求：Storybook 对 React Server Components 的支持。这个实验性解决方案让您可以在 Storybook 内部测试 RSC，方法是在客户端渲染您的服务端组件，并使用 mock 模拟 Node 环境。

用于 React Server Components 的 Storybook

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

Storybook 博客Michael Shilman

Chromatic 视觉测试插件进入内测阶段

已有超过 1,000 名开发者报名申请 Chromatic 视觉测试插件的早期访问，它为您的 Storybook 带来了“一键”视觉测试。立即了解更多关于内测的信息并获取它！

Chromatic 视觉测试插件进入内测阶段

通过一键测试调试 stories 的视觉变化

Storybook 博客Dominic Nguyen

节日快乐！

最后，我们祝大家节日快乐。2023 年是 Storybook 意义重大的一年，而 2024 年势必更加强劲。下周我们将分享一篇关于 Storybook 在 2024 年发展规划的文章，请务必关注！

感谢您今年成为 Storybook 社区的一员。没有你们，我们不可能做到这一点！