Storybook Webpack 懒加载编译

Storybook 是构建、测试和记录所有 UI 代码的工作坊环境。Shopify、Workday、Adobe、The Guardian 和更多公司的前端团队使用它来交付强大的 UI。

随着 Storybook 使用量的增长，性能已成为首要任务。我们 6.x 版本系列的核心主题是重新架构 Storybook 以缩短构建和加载时间。我们首先优化了已发布的 Storybook，现在它们的加载速度提高了 4 倍。现在我们将重点转移到改善本地开发体验。 

我很高兴地宣布 Storybook 6.5 将在开发模式中提供懒加载编译。Storybook 将仅编译核心运行时以快速启动，然后在您访问故事时构建它们。这意味着对于较大的 Storybook，启动速度更快，重建速度更快。请继续阅读以了解其工作原理。

性能路线图

在我们开始之前，让我们先了解一下迄今为止的性能更新。Storybook 由 构建器（例如 Webpack）提供支持，这些构建器处理和捆绑您的代码——Javascript、TypeScript、CSS、MDX，甚至特定于框架的文件，例如 Vue 或 Svelte SFC。我们认为优化构建器是 Storybook 性能提升的巨大机会。

Storybook 6.1 为提高速度和加载时间奠定了基础。它放弃了 Webpack DLL，然后预构建并缓存管理器以缩短构建时间。

紧随其后的是 6.2 中的重大重新架构，使 Storybook 能够支持现代构建器，例如 Vite、Snowpack 等。虽然一些团队可以利用这一点，但大多数 JavaScript 社区仍然依赖 Webpack，需要进一步优化。在 6.4 中，我们与 Webpack 和 Shopify UX 工程团队合作，对 Storybook 运行时的工作方式进行了重要更改——按需架构。

以前，Storybook 将您的所有故事打包到一个大捆绑包中。Storybook 6.4 采用代码拆分，为每个故事创建单独的捆绑包并异步加载它们。直接的影响是捆绑包大小缩小了 3 倍，这意味着已发布的 Storybook 加载速度提高了 4 倍。

尽管如此，到目前为止的改进主要局限于生产构建 - build-storybook 的静态输出。它们对那些将其 Storybook 发布到云端的人们影响最大。但 Storybook 主要是一个您在本地运行的开发人员工具。每次您点击保存时重建所需的时间又如何呢？

为开发中的构建增压

在构建组件时，您必须等待 Storybook 首先启动。然后，每次您点击保存时，您都必须再次等待它重建故事。这就是为什么 Storybook 6.5 的一个重要目标是利用 Webpack 的懒加载编译和文件缓存功能来提供更快的开发体验。

什么是文件系统缓存？

Webpack 5 引入了持久性文件系统缓存功能，使其可以使用以前构建中的信息来跳过不必要的步骤。

它的工作原理是在 Storybook 的运行之间缓存构建输出。然后在后续运行中，如果关联的代码没有更改，Webpack 可以重用构建工件。最终，这意味着所有 Storybook 的启动和重建速度都会更快，无论它们的大小如何。

什么是懒加载编译？

懒加载编译是 Next.js 等工具率先推出的开发时间功能，用于延迟组装页面的内容，直到您需要它为止。其理念是您的应用程序可能有很多路由，但在任何给定的开发会话中，您可能只会访问其中的几个，因此为什么要预先支付编译所有路由的成本呢？

当您启动开发服务器时，构建器会完成一些工作以启动运行时并非常快速地启动。

然后，当您第一次开始处理应用程序的路由时，您会在浏览器中访问它。正是在此时，构建器会编译它。当您导航到另一个路由时，您必须等待一小段时间（一到两秒，具体取决于您的应用程序/路由的复杂性）才能编译它。

故事的懒加载编译

我们将相同的体验带到 Storybook，除了我们使用 CSF 文件作为编译点而不是路由。

在典型的开发会话中，您只会访问 Storybook 中一小部分故事。将编译成本限制为仅限这些故事是明智的——特别是对于具有数百个组件的大型项目。Storybook 使用 Webpack 惰性地生成故事包。

启动 Storybook 可以快速启动它，因为它只需要构建加载和渲染故事所需的画布运行时。

当您访问您的第一个故事时，Storybook 将仅编译其代码——CSF 文件和组件。

启动性能

您会看到中小型项目的启动时间略有改善。但是，懒加载编译大大减少了大型项目启动 Storybook 所需的时间。

热缓存启动性能

懒加载编译与文件系统缓存结合使用时效果最佳。构建输出被缓存，从而加快后续启动时间。

重建性能

仅编译最少数量的故事包的另一个好处是，当您修改组件或故事时，Webpack 通常需要做的工作要少得多才能更新编译后的代码。

我们可以在下面的时间安排中看到这些好处。

试用一下

懒加载编译现已在 6.5 beta 版中提供。只需一分钟即可试用，您可以在项目的根目录中运行以下命令

npx sb upgrade --prerelease

如果您尚未使用 Storybook，则很容易上手

npx sb@next init

然后通过安装 @storybook/builder-webpack5 和 @storybook/manager-webpack5 包来选择加入 Webpack 5 构建器。

最后，在您的 Storybook 配置中启用它

// .storybook/main.js
module.exports = {
  features: {
    storyStoreV7: true,
  },
  core: {
    builder: {
      name: 'webpack5',
      options: { 
        lazyCompilation: true,
        fsCache: true, 
      }
    }
  },
};

Storybook 性能的下一步是什么

我们希望不断提高 Storybook 的性能，无论对于大型项目还是小型项目。我们将研究的一些策略

• 预测性预取以缩短“下一个故事的时间”：Storybook 将预测您接下来可能要处理的故事，并预取和预编译其代码。
• 缓存 Storybook 运行时以进一步缩短启动时间：与 Storybook 缓存其“管理器”GUI 类似，我们也计划预构建和缓存运行时。

最后，我们还将与我们的社区合作伙伴（例如 Angular 和 Webpack）合作，以充分利用他们提供的一切。

帮助塑造下一代 Storybook！

懒加载编译和文件系统缓存显着改善了您使用 Storybook 的本地开发体验。现在，您将花费更少的时间等待 Storybook 编译代码。

每天有数以万计的开发人员使用 Storybook 来构建 UI。您做了哪些调整来加快您的 Storybook？我们很乐意听取您的意见。请在 Twitter 上联系我们，或访问 Storybook Discord。

按需架构功能由 Tom Coleman (我!)、Michael Shilman、Yann Braga 和 Norbert de Langen 开发，并获得了整个 Storybook 社区的反馈。Storybook 是超过 1440 位贡献者的产品，由核心维护者的指导委员会组织。您也可以贡献新功能、修复错误或改进文档。加入我们的 Discord，在 Open Collective 上支持我们，或者直接参与 GitHub。