你的功能请求是否与问题相关?请描述
我刚刚将团队的 Storybook 升级到 6.5 并启用了懒惰编译。在大多数情况下,它运行得很好,但不幸的是,有时它会编译一些不会被使用的 stories。这看起来是由于 #17903 引起的。
这对我们来说是个问题,因为我们的 Storybook 包含了各种大小的组件,从原子组件到完整的应用程序。此外,我们的一个应用程序以字母 A 开头,是第一个加载的故事,增加了显著的等待时间。我已经配置了我们的 Storybook 将文档放在顶部,因此在初始编译时不再是一个问题,但是在浏览 Storybook 时,有时会不必要地进行编译。
描述你希望实现的解决方案
有几个对我们非常有帮助的可能性。
- 完全禁用预加载,意味着第一次打开故事时会编译它,之后永远不会再编译。
- 允许以多种方式配置预加载,例如:
- 仅在同一个 "组" 中预加载
- 仅在同一个文件中预加载
- 通过正则表达式、globs 等阻止某些故事被预加载
- 在某个故事加载时,开发者可以通过自定义预加载回调来决定应该预加载什么
描述你考虑过的替代方案
我使用了 NormalModuleReplacementPlugin 来模拟 @storybook/preview-web 从 @storybook/core-events 接收到的事件,并确保它不会监听 PRELOAD_STORIES 事件。这远非理想,我猜想在随后的 Storybook 升级过程中可能需要重新审视。
你是否能协助将这个功能变为现实?
否
4条答案
按热度按时间cyej8jka1#
这将非常有帮助,因为我们的一些故事加载了大量不必要的资源。
(一个简单的例子是Stripe加载器)
@lukeh7 你能分享更多关于你的工作吗?我不熟悉
NormalModuleReplacementPlugin
0yg35tkg2#
另一个想法是防止在
lastViewedStoryIds
中的输入触发预加载。svgewumm3#
这个有什么更新或解决方法吗?我在一个包含多个组件集的monorepo中工作,这些组件集使用不同的样式表,当你在侧边栏移动鼠标时,预加载功能会导致很多不需要的样式渗漏。
f2uvfpb94#
我找到了解决样式溢出问题的解决方案。主要缺点是它通过在全球范围内阻止
mouseout
事件的传播来工作,因此可能不适用于每个人的使用场景。在
.storybook/main.ts
(或.js
)中的故事书配置对象中添加以下内容:我在 v7.6.17 时发现了这个解决方案,但我即将升级到 v8,所以我会在验证它在那里也有效后更新这条评论。
编辑:确认在 v8.0.6 上这个解决方案也是有效的!
此外,我应该澄清的是,这只解决了当悬停在侧边栏中的 stories 时发生冲突的样式表预加载所导致的样式溢出问题。要解决由相邻故事的自动预加载引起的样式溢出问题,我们只需要对我们的章节进行命名空间,以便具有冲突样式表的故事在侧边栏中彼此保持分开。