storybook-addon-turbo-build

通过调整 webpack 配置来改善 Storybook 构建时间的 Storybook 插件。兼容 Storybook v6。

将 Terser 替换为 ESBuild 或禁用 source map 生成等改进措施可以缩短构建时间，从而节省 CI 时间或加快开发周期。

重要提示

对于 Storybook v7（及更高版本）用户

此插件不兼容 Storybook v7 及更高版本。这些新版本 Storybook 通过采用 Vite 或 webpack 5 等更高效的工具，已经显著改善了构建时间性能。如果希望进一步优化构建性能，请手动调整配置。

对于 Storybook v6 用户

Storybook 本身已经进行了一些构建性能优化。此插件主要改善冷构建，即在 node_modules/.cache 目录下没有缓存的情况下构建 Storybook。在启用缓存的构建中，差异可能微乎其微。在将此插件集成到您的工作流程之前，您应该评估一下构建时间。

安装

$ 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

入门

在您的 .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"
   ],
 };

配置

您可以通过 预设选项来自定义对 webpack 配置的修改。

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

可用选项

选项名称	描述	可用值	默认值
optimizationLevel	构建速度优化级别（参见 优化级别）	0 ~ 3	1
esbuildMinifyOptions	通过 ESBuildMinifyPlugin 为 esbuild 设置的选项	对象 (文档)	{ target: "es2015" }
removeProgressPlugin	是否移除 ProgressPlugin	布尔值	process.env.NODE_ENV === "production"
disableSourceMap	是否禁用 source map 生成	布尔值	process.env.NODE_ENV === "production"
managerTranspiler	Manager Webpack loader 配置，用于替换 babel-loader	对象（loader 配置）或函数（LoaderReplacer）	当优化级别 >= 2 时，函数返回 esbuild-loader 的 loader 配置对象，否则返回 undefined
previewTranspiler	Preview Webpack loader 配置，用于替换 babel-loader	对象（loader 配置）或函数（LoaderReplacer）	当优化级别 >= 3 时，函数返回 esbuild-loader 的 loader 配置对象，否则返回 undefined

LoaderReplacer

LoaderReplacer 是一个函数，接受 loader 配置对象和规则，然后返回一个新的 loader 配置对象。返回 null 表示移除匹配的 loader 而不是替换。

// 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

不进行优化。预设仅返回给定的 webpack 配置。

1

安全优化。此级别可以获得足够的构建性能提升。

• 使用 ESBuild 进行代码压缩，而不是 Terser
• 当 NODE_ENV=production 时禁用 source map 生成
• 当 NODE_ENV=production 时禁用 webpack 的 ProgressPlugin

2

激进优化。这将稍微提高构建速度（可能约 1 秒，取决于机器），如果您使用了社区插件，可能会导致错误。

• 在 Manager（Storybook UI、插件）中用 ESBuild 替换 babel-loader

3

危险优化。如果您的项目依赖于 Babel，这可能会破坏构建。但是会显著提高构建性能，特别是当您的项目有很多文件（stories）时。

• 在 Preview（Canvas、Docs 插件）中用 ESBuild 替换 babel-loader

限制

ES5 转译

目前 ESBuild 尚未完全支持转译到 ES5。如果将优化级别设置为高于 1，您的打包文件可能无法在仅支持 ES5 的浏览器上运行。

打包文件大小

由于此预设将 Terser 替换为 ESBuild，您可能会注意到文件大小有些许差异。但这应该非常小，不会对加载性能产生明显影响。