𝗗𝗲𝘀𝗰𝗼𝗺𝗽𝗹𝗶𝗰𝗮𝗻𝗱𝗼 𝗩𝗶𝘁𝗲
Las herramientas antiguas como Webpack o CRA funcionan empaquetando primero todo tu proyecto. Leen cada archivo y los combinan en un único archivo JavaScript de gran tamaño. Esto funciona para proyectos pequeños, pero falla en proyectos grandes con miles de módulos. Los bundles grandes tardan segundos o minutos en construirse. Cada vez que guardas un archivo, la herramienta vuelve a construir gran parte del bundle.
Vite funciona de manera diferente. Los navegadores modernos soportan ES modules de forma nativa. Vite no empaqueta tu código durante el desarrollo. Sirve cada archivo como un módulo separado solo cuando el navegador lo solicita.
Imagina un restaurante tipo buffet. El chef cocina cada uno de los platos antes de que se abran las puertas. Si quieres un pequeño cambio, el chef debe volver a preparar la mayor parte del buffet. Tienes que esperar mucho tiempo para comer. Así es como funciona Webpack.
Ahora piensa en un restaurante a la carta. Las puertas se abren de inmediato. Pides un plato. El chef prepara solo ese plato. Si más tarde quieres postre, el chef prepara solo el postre. No tienes que esperar a que se cocine todo el menú. Así es como funciona Vite.
Vite utiliza dos estrategias diferentes para dos necesidades distintas:
Desarrollo (vite dev)
- Estrategia: Sirve módulos ESM nativos sin empaquetar.
- Velocidad: Instantánea. No depende del tamaño del proyecto.
- Por qué: Las solicitudes de red local son rápidas.
Producción (vite build)
- Estrategia: Empaqueta todo usando Rolldown.
- Velocidad: Depende del tamaño del proyecto.
- Por qué: Cientos de archivos separados crean demasiadas solicitudes HTTP para los usuarios reales. El empaquetado hace que el sitio final sea más rápido para ellos.
Vite te ofrece velocidad mientras programas y rendimiento cuando lanzas tu proyecto.
Fuente: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62