storybook-addon-turbo-build

一個 Storybook 擴充功能，可透過調整 webpack 設定來改善您的 Storybook 建置時間。與 Storybook v6 相容。

諸如將 Terser 替換為 ESBuild 或停用原始碼對應產生等改進，可減少您的建置時間，因此您可以節省 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	是否停用原始碼對應產生	布林值	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、擴充功能）中將 babel-loader 替換為 ESBuild

3

危險優化。如果您的專案依賴 Babel，這可能會破壞建置。但是會大幅提升建置效能，尤其是當您的專案有許多檔案（stories）時。

• 在 Preview（Canvas、Docs 擴充功能）中將 babel-loader 替換為 ESBuild

限制

ES5 轉譯

目前 ESBuild 尚未完全支援轉譯為 ES5（尚未）。如果您將優化等級設定為高於 1，您的套件可能無法在僅支援 ES5 的瀏覽器上運作。

套件大小

由於預設值會將 Terser 替換為 ESBuild，您可能會觀察到一些檔案大小差異。但是應該非常小，而且不會帶來明顯的載入效能影響。