如何让 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

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

--test 标志的设计目标是尽可能快，因此它会删除已知会减慢构建时间且对于功能测试不必要的插件。

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

如果您正在使用 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 为所有新的 Storybook Webpack 项目（Angular 除外）将 SWC 设置为默认值。它还修复了 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。它预先捆绑了所有依赖项，从而减少了打包器的工作量，从而提高了性能。在我们 示例 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

然后，更新您的故事

- 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 进行升级。在接下来的几个月里，我们将分享 Storybook 8.0 中的所有精彩内容。请在社交媒体（Twitter/LinkedIn/Threads）、GitHub 或我们的新闻通讯上关注我们，或查看发布计划

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

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

GitHubstorybookjs

Storybook for React Server Components

在我们关于 Storybook 8.0 的第一篇文章中，我们回答了我们社区最常提出的请求之一：Storybook 对 React Server Components 的支持。这个实验性解决方案使您能够通过在客户端渲染服务器组件并使用模拟来模拟 Node 来在 Storybook 中测试 RSC。

Storybook for React Server Components

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

Storybook BlogMichael Shilman

Chromatic Visual Test Addon 已进入私有测试版

已有超过 1,000 名开发者注册了 Chromatic Visual Test Addon 的早期访问权限，该插件可为您的 Storybook 提供一键式视觉测试。了解有关私有测试版的更多信息并立即获取！

Chromatic Visual Test 插件进入私有测试版

一键测试，调试因视觉变化引起的故事

Storybook BlogDominic Nguyen

节日快乐！

最后，我们想祝大家节日快乐。2023 年对 Storybook 来说是重要的一年，而 2024 年将更加强大。下周我们将发布一篇关于 Storybook 2024 年计划的文章，所以请务必关注此处。

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