¿Qué hace un bundler como Vite o webpack?
Opciones
- Empaqueta archivos para el navegador, con un servidor de desarrollo (Opción correcta)
- Ejecuta la base de datos de la que depende la app
- Reemplaza el navegador que instalan los usuarios
- Escribe los tests de la app por los desarrolladores
Respuesta
Combina y optimiza muchos archivos JS, CSS e imágenes (y convierte JSX y TypeScript) en unos pocos que el navegador carga de forma eficiente, y ofrece un servidor de desarrollo con hot reload
Por qué
Los navegadores no pueden ejecutar JSX ni TypeScript, y cargar cientos de archivos pequeños es lento.
Un bundler sigue los imports desde tu archivo de entrada, transpila el código, lo minifica, lo divide en chunks y genera archivos estáticos optimizados.
Durante el desarrollo sirve tu app y la refresca al instante cuando guardas (hot module replacement). Vite es la opción moderna por defecto para React; webpack es más antiguo; Create React App está obsoleto.
Recuerda
Bundler = convierte tu código en archivos optimizados para el navegador.