पाठ 15 / 25

Performance Optimization

Vite builder, lazy-loaded addons और हल्के story loading से Storybook builds तेज़ करें।

Build performance

Storybook तेज़ builds के लिए Vite builder (@storybook/react-vite) support करता है। Addons को lazy-load करके, aliases configure करके और एक साथ load होने वाली stories सीमित करके इसे और तेज़ करें।

Vite configuration

Storybook के लिए Vite optimization को configure करें।

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.tsx'],
  framework: '@storybook/react-vite',
  core: { disableTelemetry: true },
  viteFinal: async (config) => ({
    ...config,
    optimizeDeps: {
      ...config.optimizeDeps,
      include: ['react-dom'],
    },
  }),
};
export default config;

Addons को lazy-load करना

Initial load time को reduce करने के लिए current environment में केवल आवश्यक addons को load करें।