How to analyze and reduce project building time?

[timsofteng]

Hello. I'm trying to migrate from CRA to vite. It is typescript project.
When I start vite in development mode with this plugin the time printed in console is pretty low. It's around 1 second. But it takes about 20-30 seconds from starting dev server to moment when I see project on my screen.

How can I analize and reduce build time?

P.s prod build takes even much more.

[ArnaudBarre]

You can run vite --profile and then press p when the page is loaded. This will dump a profile that can be loaded in chrome devtools. If the paths of your files in the project are safe to share, you can upload this profile so I can take a look.

You can also do the same thing with the current beta version of Vite 4.1, we made some performance improvements for import resolutions. It will be cool to see if the difference is significative or not.

If your project don't depend on some Babel specific option, you can try https://github.com/vitejs/vite-plugin-react-swc

You can also get some insights with https://github.com/antfu/vite-plugin-inspect

[ArnaudBarre]

You can read some information aout the devtools profiler here: https://developer.chrome.com/docs/devtools/performance

It's not strict, it just log a warning when the page reload because of it. This is almost identical between plugins and in v4 I will use the same logic as in the SWC plugin: #79

[timsofteng]

You can read some information aout the devtools profiler here: https://developer.chrome.com/docs/devtools/performance

Thanks.

It's not strict, it just log a warning when the page reload because of it. This is almost identical between plugins and in v4 I will use the same logic as in the SWC plugin: #79

I mean this rules. https://github.com/ArnaudBarre/eslint-plugin-react-refresh
Looks like it is requirement for react-swc plugin only. We have a lot of such imports in our project unfortunately.

[ArnaudBarre]

This eslint plugin is not required, it just help you find places where HMR will fail & log a warning. Most people you the SWC plugin without this linter rule I think.

[timsofteng]

This eslint plugin is not required, it just help you find places where HMR will fail & log a warning. Most people you the SWC plugin without this linter rule I think.

I mean import requirements. Hrm will not work with such imports if I've got correctly.

[ArnaudBarre]

The fast refresh requirements are almost the same on both plugins and other toolchain. When you use mixed exports, HMR will not work for this file and trigger HMR for more files or do a hard reload with a warning explaining why. But that's not required or more difficult than with others tools, on the opposite, it guides you to better HMR.