Storybook Vite 2x slower than the default #58
Comments
|
Interesting, thanks for reporting.
Does this happen when you are editing a component, or editing a story? Is HMR occurring, or a page refresh? You mention making a class replacement, does that mean you are using
The storybook manager (the portion of the page outside of the preview) is still built with webpack, which is why you're seeing those references.
I'm not a vite expert, but I believe it serves files "unbundled" in development so that the browser can cache small pieces and swap out only what's needed when changes are made. This isn't ideal when they all need to be loaded at once, as you're finding. Maybe there is an improvement that can be made here, I'm not certain... Do you see the same kinds of times when you build your app with vite outside of storybook, or do you get full HMR and instant refreshes there? |
|
I was talking about a css class. Changing the |
|
There's an issue about it in vite that has some good description and background: vitejs/vite-plugin-react#8. I agree it would be good to add a caveat to https://github.com/vitejs/vite/blob/main/packages/plugin-react-refresh/README.md, maybe you'd like to submit a PR to them? |
|
I don't see where it says that React Fast Refresh doesn't support classes. It's stated in the Vite issue but I can't find any reference outside of that issue. Could you point that out for me ? |
|
I'm not certain of the details. I'd suggest commenting on the vite issue if it's something you want to dig into further. It's not related to the storybook builder, it sounds like. |
|
I just tested with a FC component, the updates happens in a snap. I'll see with Vite. Also I'm in the middle of a refacto so it might be an opportunity to move towards hooks. |
|
I'll close this issue, feel free to reopen if there's something that can be fixed in this builder. |
After migrating from the default builder to the vite builder, it now takes
4secto refresh the page after updating a class in a component, when it took2secbefore.The startup still mentions webpack so I'm a bit confused, I don't know if it's supposed to do that.
Also after updating the component, a simple class replacement,
787 requestsare made. About half of them are cached but since the browsers have a limit of 9 concurrent requests, it still takes time to process them. Maybe it is a HMR issue.Is it normal to have mentions of webpack during startup ?
It is normal to have so many requests after a component update ?
What can I do to investigate ?
Storybook startup
package.json summary
{ "main": "src/index.tsx", "packageManager": "yarn@2.4.1", "dependencies": { "react": "^17.0.1", "react-dom": "^17.0.1", "vite": "^2.3.7", "vite-plugin-svgr": "^0.3.0", "vite-tsconfig-paths": "^3.3.13", }, "scripts": { "storybook": "start-storybook -p 6006", }, "devDependencies": { "@mdx-js/react": "^1.6.22", "@storybook/addon-actions": "6.3.1", "@storybook/addon-docs": "6.3.1", "@storybook/addon-essentials": "6.3.1", "@storybook/addon-links": "6.3.1", "@storybook/addon-postcss": "^2.0.0", "@storybook/react": "6.3.1", "@vitejs/plugin-react-refresh": "^1.3.1", "storybook-addon-intl": "^2.4.1", "storybook-builder-vite": "^0.0.10", "typescript": "4.1.3", } }The text was updated successfully, but these errors were encountered: