Update vite in examples to 2.9.0-beta.8

[IanVS]

https://github.com/vitejs/vite/blob/v2.9.0-beta.8/packages/vite/CHANGELOG.md

[IanVS]

@patak-dev asked that we check out the latest vite beta in the storybook builder. As far as I can tell, it's working fine, except for a new warning about a missing sourcemap in the terminal after the build completes:

▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   374 ms for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
Sourcemap for "/iframe.html" points to missing source files
10:04:58 PM [vite] ✨ dependencies optimized: prop-types, @base2/pretty-print-object, @emotion/core, @emotion/is-prop-valid, @emotion/styled, ...and 66 more

But, the sourcemaps for the stories seem fine, so I'm not sure this is something we need to worry about, aside from it perhaps being concerning to users.

[IanVS]

Here are the results of starting storybook three times with vite 2.8.5:

▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets
Pre-bundling dependencies:
  prop-types
  @base2/pretty-print-object
  @emotion/core
  @emotion/is-prop-valid
  @emotion/styled
  (...and 66 more)
(this will be run only when your dependencies or config have changed)

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   2.29 s for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
^C%

storybook-builder-vite/examples/react  main ✔                                                                       6d5h  ⍉
▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   241 ms for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
^C%

storybook-builder-vite/examples/react  main ✔                                                                       6d5h  ⍉
▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   250 ms for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯

And then three times with 2.9.0-beta.7:

storybook-builder-vite/examples/react  update-vite-2.9.0-beta.7 ✔                                                     28m
▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   374 ms for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
Sourcemap for "/iframe.html" points to missing source files
10:04:58 PM [vite] ✨ dependencies optimized: prop-types, @base2/pretty-print-object, @emotion/core, @emotion/is-prop-valid, @emotion/styled, ...and 66 more
^C%

storybook-builder-vite/examples/react  update-vite-2.9.0-beta.7 ✔                                                    35m  ⍉
▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   478 ms for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
Sourcemap for "/iframe.html" points to missing source files
^C%

storybook-builder-vite/examples/react  update-vite-2.9.0-beta.7 ✔                                                    35m  ⍉
▶ yarn storybook
info @storybook/react v6.5.0-alpha.49
info
info => Loading presets

info => Using cached manager
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.5.0-alpha.49 for React started        │
│   467 ms for preview                                │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.68.112:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯
Sourcemap for "/iframe.html" points to missing source files

Based on this unscientific sampling, it seems that cold start is now faster, and warm start is a tiny bit slower. This is consistent with what I see in my own app, where I'm getting consistent cold & hot start times around 7 seconds with the beta, and 11 cold / 6.5 hot with 2.8.6.

[patak-dev]

The non-blocking pre-bundling rework in 2.9 shouldn't affect hot startup times if you have your browser cache disabled. If it is enabled, for a clean browser cache + clean vite cache, you should compare the third startup time of beta.9 against the second for 2.8 (in the beta, in the second hot load the browser cache is still not populated).

If it isn't that, maybe vitejs/vite#7173 is affecting these results? We should expect a bit of a performance hit for it. @sapphi-red we could profile a bit in that case to see if there are some optimizations that we are missing in the new code paths.

@IanVS would you test using vite@2.9.0-beta.4 (that doesn't have 7173)? I think the source map error will not appear there, and we can check how hot startup times behaves (also try it with the third load).

[patak-dev]

For reference, in Vite Land #dev-server, a user confirmed that there are new missing source maps logs that appeared in beta.6 and aren't present in beta.4 (beta.5 wasn't published due to a GitHub glitch)

[sapphi-red]

I partially fixed the sourcemap warning issue (vitejs/vite#7434). 👍
But the warning will still show even if 7434 was merged.
This is because examples/react/iframe.html does not exist on fs.
I have one question about this. Is there any reason iframe.html does not have a virtual file prefix (virtual:)?

[patak-dev]

Thanks again for looking into this and the quick fix @sapphi-red.

About virtual:, that is only a convention, we can't expect users to respect it. And I haven't seen it applied to HTML files. I imagine that we will hit the same issue with SvelteKit and Nuxt routes, no?

[IanVS]

I just tried using virtual, and that doesn't seem to work, since the storybook page loads /iframe.html. So if we don't name it thus, we get a 404. Unless there's something else that I'm missing or misunderstanding.

[sapphi-red]

I see. Thank you for the explanation.

I imagine that we will hit the same issue with SvelteKit and Nuxt routes, no?

I don't know about the implementation of them but if those are using transformIndexHtml with a non-existent file then it will occur.

I am not sure what is the best way to fix this. But I have created a PR which suppresses warnings when it is a virtual html file (vitejs/vite#7440). Also the PR includes a minimal reproduction in test (if you prefer stackblitz it's here).

[IanVS]

Thanks for the super-fast turnaround @patak-dev and @sapphi-red. I've just tested out beta.8. The sourcemap warning is gone, and the startup times are about 330-350ms, which is similar to what I see with beta.4 as well. 🚀 whereas beta.7 is consistently 400ms for me. Still slightly slower than the 250-270ms of 2.8.6. My own storybook which has hundreds of stories loads in ~7.5s now (beta 8 and beta 4) compared to ~6.8s in 2.8.6. Beta.1 is in between them at ~7.2. Not sure if any of this is useful, but just thought I'd share. These are all hot load times, FWIW.

[patak-dev]

Thanks for testing! We need to check why the server is tacking longer in hot start, nothing has changed AFAICS.