awesome-vite VS rollup-plugin-visualizer

Vite is a modern front-end build tool that significantly improves the development experience with its fast cold server start and hot module replacement. It leverages native ES modules and is optimized for speed and efficiency.

🔨 Vite ⚡

https://github.com/vitejs/awesome-vite#react

I suggest Vite community templates https://github.com/vitejs/awesome-vite

here

I saw Vite but not sure how easy it is to switch to that from an existing project.

I think most around here currently recommend Vite for a quick up and running SPA. If you'd like some tooling already set up, you can check out some of the community made templates at awesome vite.

It is super easy to get started with Vite and there is really no hard learning curve either. If you want to learn more about all the awesome things Vite can do, Check out this repo.

Vite has templates and plugins that you can install as project dependencies or use them. You can find a list of that and more here.

I think https://github.com/btd/rollup-plugin-visualizer can help with checking which packages are the largest.

In our "old" build system - I configured webpack-bundle-analyze to inspect bundle chunks and understand what it made of. I added rollup-bundle-visualyzer instead (although there is an issue that the reported size is not correct).