StorybookAddonPerformance 使用教程

StorybookAddonPerformance 使用教程

storybook-addon-performance 🚧 A storybook addon to help better understand and debug performance for React components. 项目地址: https://gitcode.com/gh_mirrors/st/storybook-addon-performance

1. 项目介绍

storybook-addon-performance 是一个开源的 Storybook 插件，旨在帮助开发者更好地理解和调试 React 组件的性能。该插件能够自动生成关于服务器端渲染和客户端挂载的性能信息，而无需任何额外配置。它的特点包括：

• 零配置（交互除外）：自动生成性能数据。
• 结果固定：运行任务后可以固定结果，便于后续对比更改前后的性能差异。
• 保存/加载结果：可以将结果保存为本地文件，之后重新加载用于对比。
• 交互：允许自定义任务来测试组件的交互性能。
• 控制台输出：所有任务都会使用用户时间 API 标记，便于在浏览器的性能分析器中调试。

2. 项目快速启动

在开始之前，请确保已经安装了 Node.js 和 Storybook。

安装

使用以下命令之一安装 storybook-addon-performance：

pnpm add storybook-addon-performance --dev
# 或者
yarn add storybook-addon-performance --dev
# 或者
npm install storybook-addon-performance --save-dev

注册插件

在 .storybook/main.js 文件中注册该插件：

module.exports = {
  addons: [
    'storybook-addon-performance'
  ],
};

添加装饰器

推荐在 .storybook/preview.js 文件中全局添加装饰器：

import { withPerformance } from 'storybook-addon-performance';

export const decorators = [
  withPerformance
];

或者，你也可以为单个故事添加装饰器：

import MyComponent from './MyComponent';
import { withPerformance } from 'storybook-addon-performance';

export default {
  title: 'MyComponent',
  component: MyComponent,
  decorators: [
    withPerformance
  ],
};

3. 应用案例和最佳实践

定义交云任务

交云任务是用于测试组件交云性能的任务类型。以下是如何定义交云任务的一个例子：

import { InteractionTaskArgs, PublicInteractionTask } from 'storybook-addon-performance';
import { findByText, fireEvent } from '@testing-library/dom';

const interactionTasks: PublicInteractionTask[] = [
  {
    name: 'Display dropdown',
    description: 'Open the dropdown and wait for Option 5 to load',
    run: async ({ container }: InteractionTaskArgs) => {
      const element: HTMLElement | null = container.querySelector('.addon__dropdown-indicator');
      invariant(element);
      fireEvent.mouseDown(element);
      await findByText(container, 'Option 5', undefined, { timeout: 20000 });
    }
  }
];

然后，你可以在故事的性能参数中包含交云任务：

export default {
  title: 'React select example',
  parameters: {
    performance: {
      interactions: interactionTasks,
    },
  },
};

保存和加载结果

在 UI 中使用“保存结果”和“加载结果”按钮，你可以保存性能测试的结果并在之后作为基准进行比较。

4. 典型生态项目

目前，storybook-addon-performance 已被许多项目采用，作为性能测试的一部分。它通常与以下生态项目一起使用：

• @testing-library/react：用于测试 React 组件。
• @storybook/react：Storybook 官方提供的 React UI 组件库。
• 其他 Storybook 插件，如 storybook-addon-actions、storybook-addon-links 等。

通过整合这些项目，你可以构建一个强大的开发环境，帮助你的团队提高生产效率和代码质量。

storybook-addon-performance 🚧 A storybook addon to help better understand and debug performance for React components. 项目地址: https://gitcode.com/gh_mirrors/st/storybook-addon-performance