𝗗𝗲𝘀𝗰𝗼𝗺𝗽𝗹𝗶𝗰𝗮𝗻𝗱𝗼 𝗼 𝗩𝗶𝘁𝗲
Old tools like Webpack or Create React App work by bundling your entire project first. The tool reads every file and turns them into one giant JavaScript file. This works for small projects. It fails for large projects. In large projects, this process takes many seconds. Every time you save a file, the tool must redo much of that work.
Vite works differently. Modern browsers support ES modules natively. This means the browser can handle imports and exports itself. 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 opening the doors. If you want one small change, the chef must redo the entire buffet. This is how Webpack works. The larger the project, the longer you wait.
Vite is like 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 be ready.
Vite uses two different strategies for two different needs:
Development (vite dev) • Strategy: Serves native ESM modules without bundling. • Start speed: Instant. It does not depend on project size. • Why: Local HTTP requests are fast on your computer.
Production (vite build) • Strategy: Bundles everything using Rolldown. • Start speed: Time grows with the project size. • Why: Hundreds of separate files cause too many HTTP requests for users. Bundling fixes this.
Vite gives you speed while you code and efficiency when you launch.
Source: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62