Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
storybook-addon-turbo-build
Advanced tools
Readme
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.
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.
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.
$ 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
Add this line in your .storybook/main.js
.
module.exports = {
stories: [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
+ "storybook-addon-turbo-build"
],
};
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,
},
},
],
};
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" |
managerTranspiler | Manager Webpack loader configuration that will replace babel-loader with | Object (loader config) or Function (LoaderReplacer ) | 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 ) | Function returns a loader config object for esbuild-loader when Optimization Level >= 3, undefined otherwise |
LoaderReplacer
LoaderReplacer
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.
// Type Definition
type LoaderReplacer = (
loader: webpack.RuleSetUseItem,
rule: webpack.RuleSetRule
) => webpack.RuleSetUseItem | null;
// 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
}
}
0
No optimization. The preset just returns given webpack configuration.
1
Safe optimizations. You'll get enough build performance boost with this level.
NODE_ENV=production
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.
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).
babel-loader
with ESBuild in Preview (Canvas, Docs Addon)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.
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.
FAQs
Storybook Addon to improve build performance
The npm package storybook-addon-turbo-build receives a total of 58,455 weekly downloads. As such, storybook-addon-turbo-build popularity was classified as popular.
We found that storybook-addon-turbo-build demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.