Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pocka/storybook-addon-turbo-build
Storybook Addon to improve build performance
https://github.com/pocka/storybook-addon-turbo-build
dx esbuild storybook storybook-addon
Last synced: 4 days ago
JSON representation
Storybook Addon to improve build performance
- Host: GitHub
- URL: https://github.com/pocka/storybook-addon-turbo-build
- Owner: pocka
- License: mit
- Created: 2021-02-15T09:46:02.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-27T08:24:31.000Z (11 months ago)
- Last Synced: 2025-01-21T11:11:17.195Z (12 days ago)
- Topics: dx, esbuild, storybook, storybook-addon
- Language: TypeScript
- Homepage:
- Size: 83 KB
- Stars: 49
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# storybook-addon-turbo-build
[](https://www.npmjs.com/package/storybook-addon-turbo-build)
[](https://github.com/pocka/storybook-addon-turbo-build/blob/master/LICENSE)
[](https://github.com/prettier/prettier)
A Storybook addon that improves your Storybook build time by tweaking webpack configuration.
Compatible with Storybook v6.
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 note
### For Storybook v7 (and later versions) users
This addon does not work with Storybook v7 and later versions.
Those newer Storybook versions vastly improved build-time performance by adopting more efficient tools such as Vite or webpack 5.
If you want to optimise your build performance further more, please tweak your configuration manually.
### For Storybook v6 users
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
```sh
$ 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`.
```diff
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(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](https://storybook.js.org/docs/react/addons/install-addons#optional-configuration).
```js
// .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](#optimization-levels)) | `0` ~ `3` | `1` |
| `esbuildMinifyOptions` | Options for esbuild via `ESBuildMinifyPlugin` | object ([Docs](https://github.com/privatenumber/esbuild-loader#minifyplugin)) | `{ 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"` |
| `managerTranspiler` | Manager Webpack loader configuration that will replace `babel-loader` with | Object (loader config) or Function ([`LoaderReplacer`](#loader-replacer)) | Function returns a loader config object for `esbuild-loader` when Optimization Level >= 2, `undefined` otherwise |
| `previewTranspiler` | Preview Webpack loader configuration that will replace `babel-loader` with | Object (loader config) or Function ([`LoaderReplacer`](#loader-replacer)) | Function returns a loader config object for `esbuild-loader` when Optimization Level >= 3, `undefined` otherwise |
#### `LoaderReplacer`
[`LoaderReplacer`](./src/webpack.ts) is a function that takes loader config object and rule then returns a new loader config object.
Return `null` to remove the matching loader instead of to replace.
```ts
// Type Definition
type LoaderReplacer = (
loader: webpack.RuleSetUseItem,
rule: webpack.RuleSetRule
) => webpack.RuleSetUseItem | null;
```
```ts
// Replace babel-loader with swc-loader in Preview Webpack
{
previewTranspiler(loader, rule) {
return {
loader: "swc-loader",
options: {/* ... */}
}
}
}
// Simply remove babel-loader from Manager Webpack
{
managerTranspiler() {
return null
}
}
```
### 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.