storybook-addon-turbo-build

npm license code style: prettier

A Storybook addon that improves your Storybook build time by tweaking webpack configuration.

Improvements such as replacing Terser with ESBuild or disabling source map generation reduces your build time, so you can save your CI time or operate development cycle more quickly.

Important

Storybook already does various build performance improvements. This addon mainly improves cold build, which is when you build Storybook without caches under your node_modules/.cache. There could be barely noticable differences in cache enabled builds. You should evaluate the build time before integrating this addon into your workflow.

Installation

$ npm i -D storybook-addon-turbo-build

# in other package managers
$ yarn add -D storybook-addon-turbo-build
$ pnpm i -D storybook-addon-turbo-build

Getting Started

Add this line in your .storybook/main.js.

 module.exports = {
   stories: [
     "../stories/**/*.stories.mdx",
     "../stories/**/*[email protected](js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "storybook-addon-turbo-build"
   ],
 };

Configurations

You can customize modifications to webpack config through preset options.

// .storybook/main.js
module.exports = {
  // ...
  addons: [
    // ...
    {
      name: "storybook-addon-turbo-build",
      options: {
        // Please refer below tables for available options
        optimizationLevel: 2,
      },
    },
  ],
};

Available Options

Option Name Description Available Values Default Value
optimizationLevel Level of build speed optimization (See Optimization Levels) 0 ~ 3 1
esbuildMinifyOptions Options for esbuild via ESBuildMinifyPlugin object (Docs) { target: "es2015" }
removeProgressPlugin Whether to remove ProgressPlugin boolean process.env.NODE_ENV === "production"
disableSourceMap Whether to disable source map generation boolean process.env.NODE_ENV === "production"

Optimization Levels

0

No optimization. The preset just returns given webpack configuration.

1

Safe optimizations. You'll get enough build performance boost with this level.

  • Use ESBuild for minification instead of Terser
  • Disables source map generation when NODE_ENV=production
  • Disables webpack's ProgressPlugin when NODE_ENV=production

2

Aggressive optimizations. This would improve build speed slightly (probably about 1s, depends on machine) and may causes an error if you're using community addons.

  • Replace babel-loader with ESBuild in Manager (Storybook UI, Addons)

3

Dangerous optimizations. If your project is relying on Babel, this probably will break the build. But will dramatically increases build performance especially when your project has a lot of files (stories).

  • Replace babel-loader with ESBuild in Preview (Canvas, Docs Addon)

Limitations

ES5 Transpilation

Currently ESBuild does not fully support transpilation to ES5 (yet). If you set optimization level to higher than 1, your bundle might not work on browsers support only up to ES5.

Bundle size

Since the preset replaces Terser with ESBuild, you may observe some file size differences. But it should be very small and does not bring noticable loading performance impact.

Storybook Addon Turbo Build

Storybook Addon to improve build performance

Storybook Addon Turbo Build Info

⭐ Stars 24
🔗 Source Code github.com
🕒 Last Update 24 days ago
🕒 Created a year ago
🐞 Open Issues 3
➗ Star-Issue Ratio 8
😎 Author pocka