This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
npx vite-bundle-visualizer
Currently we are having problems with CSS Flickering. So I need to move some of the code to styles instead so it loads first.
Our CSS Flickers because of dynamic imports. However, I don't think that it should be dynamic because we're already know the name of the css to import. I just don't know how to inject the css to the js.
Relative references:
-
SO - Wait for CSS to load before JS in React [FOUC]
This reference looks like something that we are talking about. But I don't know how to implement it in vite. - SO - Dynamic import vite css
But, since you import your CSS dynamically, there is no way to avoid FOUC. Because the CSS is loaded after JS and after the DOM loaded
Currently we're building with vite as js and css file, but I don't know enough configurations to work around it. vite - How to bundle as a single JS and a single CSS file
One hack to do is SO - Eliminate flash of unstyled content
<style>
html {
visibility: hidden;
opacity: 0;
}
</style>Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:
html {
visibility: visible;
opacity: 1;
}Some SO questions also face the same problem