𝗗𝗲𝘀𝗰𝗼𝗺𝗽𝗹𝗶𝗰𝗮𝗻𝗱𝗼 𝗼 𝗩𝗶𝘁𝗲
Old tools like Webpack or CRA work by bundling your entire project first. They read every file and combine them into one large JavaScript file. This works for small projects. It fails for large projects with thousands of modules. Large bundles take seconds or minutes to build. Every time you save a file, the tool rebuilds large parts of the bundle.
Vite works differently. Modern browsers support ES modules natively. Vite does not bundle your code during development. It serves each file as a separate module only when the browser asks for it.
Think of a buffet restaurant. The chef cooks every single dish before the doors open. If you want one small change, the chef must remake most of the buffet. You wait a long time for your food. This is how Webpack works.
Now think of an à la carte restaurant. The doors open immediately. You order one dish. The chef prepares only that dish. If you want dessert later, the chef prepares only the dessert. You do not wait for the whole menu to cook. This is how Vite works.
Vite uses two different strategies for two different needs:
Development (vite dev)
- Strategy: Serves native ESM modules without bundling.
- Speed: Instant. It does not depend on project size.
- Why: Local network requests are fast.
Production (vite build)
- Strategy: Bundles everything using Rolldown.
- Speed: Depends on project size.
- Why: Hundreds of separate files create too many HTTP requests for real users. Bundling makes the final site faster for them.
Vite gives you speed while you code and performance when you launch.
Source: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62