Me explique seu setup de build. Por que empacotar se os navegadores suportam módulos nativamente?

Módulos nativos funcionam, mas entregar centenas de arquivos sem bundle significa centenas de requisições e uma cascata profunda de dependências, o que é lento até em HTTP/2. Empacotar te dá tree shaking, minificação, code splitting por rota, nomes de arquivo com hash de conteúdo para caches longos e um lugar para transformar TypeScript e JSX. Servidores de desenvolvimento hoje servem módulos nativos para inicialização instantânea e depois empacotam para produção, o que junta o melhor dos dois.

Módulos nativos são genuinamente usáveis hoje, mas no momento em que tenho uma árvore de dependências real estou pedindo ao navegador para descobrir e buscar centenas de arquivinhos em cascata, e cada nível do grafo custa mais uma ida e volta. Empacotar colapsa isso. Também me dá tree shaking, então exports não usados nunca são entregues, minificação, nomes de arquivo com hash de conteúdo para eu cachear assets por um ano, e um lugar único para compilar TypeScript. Em desenvolvimento uso um servidor que serve módulos ES nativos e transforma sob demanda, então a inicialização é instantânea independentemente do tamanho do projeto, e depois produzo um build empacotado para produção. Para divisão, separo por rota por padrão, mais fronteiras lazy em volta de qualquer coisa pesada não necessária na primeira renderização, como um editor de rich text ou uma biblioteca de gráficos. E mantenho um orçamento de tamanho no CI que reprova o build acima de um limite, porque tamanho de bundle só regride uma dependência pequena por vez, e quando fica óbvio já virou um projeto em vez de uma correção.