Lesson 15 / 25

Performance Optimization

Speed up Storybook builds with the Vite builder, lazy-loaded addons and leaner story loading.

Build performance

Storybook supports a Vite builder (@storybook/react-vite) for faster builds. Speed things up further by lazy-loading addons, configuring aliases and limiting how many stories load at once.

Vite configuration

Configure Vite optimization for Storybook.

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;

Lazy-loading addons

Only load addons you need in the current environment to reduce initial load time.