storybook-addon-turbo-build

一个 Storybook 插件，通过调整 webpack 配置来缩短 Storybook 的构建时间。兼容 Storybook v6。

例如，用 ESBuild 替换 Terser 或禁用源映射生成等改进可以减少构建时间，从而节省 CI 时间或加快开发周期。

重要提示

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

此插件不适用于 Storybook v7 及更高版本。这些较新的 Storybook 版本通过采用更有效的工具（如 Vite 或 webpack 5）大大提高了构建性能。如果您想进一步优化构建性能，请手动调整您的配置。

适用于 Storybook v6 用户

Storybook 已经进行了各种构建性能改进。此插件主要改进冷构建，即在没有缓存的情况下构建 Storybook（位于您的 node_modules/.cache 下）。在启用缓存的构建中，差异可能几乎不可察觉。您应该在将此插件集成到工作流程中之前评估构建时间。

安装

$ 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	是否禁用源映射生成	布尔值	process.env.NODE_ENV === "production"
managerTranspiler	Manager Webpack 加载器配置，将用以下内容替换 babel-loader	对象（加载器配置）或函数 (LoaderReplacer)	当优化级别 >= 2 时，函数返回 esbuild-loader 的加载器配置对象，否则返回 undefined
previewTranspiler	Preview Webpack 加载器配置，将用以下内容替换 babel-loader	对象（加载器配置）或函数 (LoaderReplacer)	当优化级别 >= 3 时，函数返回 esbuild-loader 的加载器配置对象，否则返回 undefined

LoaderReplacer

LoaderReplacer 是一个函数，它接受加载器配置对象和规则，然后返回一个新的加载器配置对象。返回 null 以移除匹配的加载器而不是替换它。

// 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 时禁用源映射生成
• 当 NODE_ENV=production 时禁用 webpack 的 ProgressPlugin

2

积极优化。这将略微提高构建速度（可能大约 1 秒，取决于机器），如果您使用的是社区插件，可能会导致错误。

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

3

危险优化。如果您的项目依赖于 Babel，这可能会破坏构建。但是，它会显着提高构建性能，尤其是在您的项目有很多文件（故事）时。

• 在 Preview（画布、文档插件）中用 ESBuild 替换 babel-loader

限制

ES5 转换

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

捆绑包大小

由于预设用 ESBuild 替换了 Terser，您可能会观察到一些文件大小差异。但它应该非常小，不会带来明显的加载性能影响。