[Feature Request]: Allow story preloading to be disabled/configured

[lukeh7]

Is your feature request related to a problem? Please describe

I've just upgraded my team's Storybook to 6.5 and enabled lazy compilation. It works great in most cases, but unfortunately it sometimes compiles stories that aren't going to be used. It looks like this is down to #17903.
This is a problem for us as our Storybook contains components of all sizes, from atoms up to full blown applications. Further to that, one of our applications begins with the letter A, and is the first story that gets loaded, adding significant wait times. I've configured our Storybook to put the documentation at the top, so it's no longer a problem on initial compile however it does sometimes get unnecessarily compiled whilst navigating around the Storybook.

Describe the solution you'd like

There are a few possibilities that would be really helpful for us.

• Allow for preloading to be disabled outright, meaning the first time a story is opened it'll be compiled and never be compiled prior to that.
• Allow for preloading to be configured in multiple ways, i.e.
  • Only preload if in the same "group"
  • Only preload if in the same file
  • Prevent certain stories from being preloaded, via regex, globs etc.
  • A custom preload callback where the developer can decide what should be preloaded when a certain story is loaded

Describe alternatives you've considered

I've used NormalModuleReplacementPlugin to mock the events that @storybook/preview-web receives from @storybook/core-events and ensure it doesn't listen to the PRELOAD_STORIES event. This is far from ideal and I imagine will likely need revisiting during subsequent Storybook upgrades.

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[jd-carroll]

This would be super helpful as some of our stories load massive resources that are not necessary for anything else.
(A simple example would be the Stripe loader)

@lukeh7 Can you share more of your work around? I am not familiar with the NormalModuleReplacementPlugin

[jd-carroll]

One other idea would be to prevent the entry in lastViewedStoryIds from trigger a pre-load

[scottyschup]

Any update or workaround for this? I'm working in a monorepo that contains mutliple component sets using different stylesheets, and the preload functionality causes a lot of unwanted style bleed when you move a mouse around in the sidebar.

[scottyschup]

I found a workaround for the style-bleed issue I was having. The main drawback is that it works by stopping propagation of mouseout events globally, so it may not work for everyone's use case.

Add the following to your Storybook config object in .storybook/main.ts (or .js):

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

I discovered this workaround while on v7.6.17, but I'm about to upgrade to v8, so I'll update this comment once I verify it works there too.

Edit: confirmed the workaround works on v8.0.6 as well!

Also, I should clarify that this only addresses the style-bleed that occurs when hovering over stories in the sidebar causes conflicting stylesheets to be preloaded. To address the style-bleed caused by the automatic preloading of neighboring stories, we just had to namespace our sections so that stories with conflicting stylesheets were kept apart from each other in the sidebar.