storybook **功能请求** :允许禁用/配置故事预加载

iovurdzv  于 3个月前  发布在  其他
关注(0)|答案(4)|浏览(38)

你的功能请求是否与问题相关?请描述

我刚刚将团队的 Storybook 升级到 6.5 并启用了懒惰编译。在大多数情况下,它运行得很好,但不幸的是,有时它会编译一些不会被使用的 stories。这看起来是由于 #17903 引起的。
这对我们来说是个问题,因为我们的 Storybook 包含了各种大小的组件,从原子组件到完整的应用程序。此外,我们的一个应用程序以字母 A 开头,是第一个加载的故事,增加了显著的等待时间。我已经配置了我们的 Storybook 将文档放在顶部,因此在初始编译时不再是一个问题,但是在浏览 Storybook 时,有时会不必要地进行编译。

描述你希望实现的解决方案

有几个对我们非常有帮助的可能性。

  • 完全禁用预加载,意味着第一次打开故事时会编译它,之后永远不会再编译。
  • 允许以多种方式配置预加载,例如:
  • 仅在同一个 "组" 中预加载
  • 仅在同一个文件中预加载
  • 通过正则表达式、globs 等阻止某些故事被预加载
  • 在某个故事加载时,开发者可以通过自定义预加载回调来决定应该预加载什么

描述你考虑过的替代方案

我使用了 NormalModuleReplacementPlugin 来模拟 @storybook/preview-web 从 @storybook/core-events 接收到的事件,并确保它不会监听 PRELOAD_STORIES 事件。这远非理想,我猜想在随后的 Storybook 升级过程中可能需要重新审视。

你是否能协助将这个功能变为现实?

cyej8jka

cyej8jka1#

这将非常有帮助,因为我们的一些故事加载了大量不必要的资源。
(一个简单的例子是Stripe加载器)
@lukeh7 你能分享更多关于你的工作吗?我不熟悉NormalModuleReplacementPlugin

0yg35tkg

0yg35tkg2#

另一个想法是防止在lastViewedStoryIds中的输入触发预加载。

svgewumm

svgewumm3#

这个有什么更新或解决方法吗?我在一个包含多个组件集的monorepo中工作,这些组件集使用不同的样式表,当你在侧边栏移动鼠标时,预加载功能会导致很多不需要的样式渗漏。

f2uvfpb9

f2uvfpb94#

我找到了解决样式溢出问题的解决方案。主要缺点是它通过在全球范围内阻止 mouseout 事件的传播来工作,因此可能不适用于每个人的使用场景。
.storybook/main.ts(或 .js)中的故事书配置对象中添加以下内容:

const config: StorybookConfig = {
 ...
 managerHead: (head) => `
${head}
<script>
window.document.addEventListener('mouseout', function(ev) {
ev.stopImmediatePropagation();
}, true);
</script>
`,
  ...
};

我在 v7.6.17 时发现了这个解决方案,但我即将升级到 v8,所以我会在验证它在那里也有效后更新这条评论。
编辑:确认在 v8.0.6 上这个解决方案也是有效的!
此外,我应该澄清的是,这只解决了当悬停在侧边栏中的 stories 时发生冲突的样式表预加载所导致的样式溢出问题。要解决由相邻故事的自动预加载引起的样式溢出问题,我们只需要对我们的章节进行命名空间,以便具有冲突样式表的故事在侧边栏中彼此保持分开。

相关问题