Explícame tu configuración de build. ¿Por qué empaquetar si los navegadores soportan módulos de forma nativa?

Los módulos nativos funcionan, pero entregar cientos de archivos sin empaquetar significa cientos de peticiones y una cascada profunda de dependencias, lo cual es lento incluso con HTTP/2. Empaquetar te da tree shaking, minificación, división de código por ruta, nombres de archivo con hash de contenido para cachés largas y un sitio donde transformar TypeScript y JSX. Los servidores de desarrollo hoy sirven módulos nativos para arrancar al instante y luego empaquetan para producción, que es lo mejor de ambos mundos.

Los módulos nativos hoy son perfectamente usables, pero en cuanto tengo un árbol de dependencias real le estoy pidiendo al navegador que descubra y descargue cientos de archivos pequeños en cascada, y cada nivel del grafo cuesta otro viaje de ida y vuelta. Empaquetar colapsa eso. También me da tree shaking, así que las exportaciones no usadas nunca se entregan, minificación, nombres con hash de contenido para poder cachear assets un año y un único sitio donde compilar TypeScript. En desarrollo uso un servidor que sirve módulos ES nativos y transforma bajo demanda, así el arranque es instantáneo sea cual sea el tamaño del proyecto, y luego genero un build empaquetado para producción. Para la división, divido por ruta por defecto, más fronteras diferidas alrededor de cualquier cosa pesada que no haga falta para el primer render, como un editor de texto enriquecido o una librería de gráficas. Y mantengo un presupuesto de tamaño en CI que hace fallar el build al pasar un umbral, porque el tamaño del bundle solo empeora una dependencia pequeña cada vez, y cuando ya es evidente es un proyecto y no un arreglo.