Performance Optimization

Build performance

Storybook 7+ uses Vite for faster builds. Optimize your build by lazy-loading addons, configuring proper aliases, and reducing story count per page.

Vite configuration

Configure Vite optimization for Storybook.

export const viteFinal = async (config) => ({
  ...config,
  optimizeDeps: {
    ...config.optimizeDeps,
    include: ['react-dom'],
  },
});

export default {
  core: {
    builder: '@storybook/builder-vite',
    disableTelemetry: true,
  },
};

Lazy-loading addons

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