Tree shaking
Tree shaking es el paso del build en que el bundler elimina el código que se exporta pero nunca se importa, para que no llegue al bundle de producción.
Un bundler parte del punto de entrada de la aplicación y sigue cada import. Todo lo que nunca se alcanza se puede dejar fuera. Esto funciona porque los imports y exports de los ES modules son estáticos: el bundler puede ver qué nombres se usan sin ejecutar el código. El término viene de la imagen de sacudir un árbol para que caigan las hojas secas.
Ejemplo
Un archivo de utilidades exporta dos funciones:
export function formatDate(d: Date) { /* ... */ }
export function formatCurrency(n: number) { /* ... */ }La aplicación importa solo formatDate. En el build de producción, formatCurrency se elimina. Lo mismo pasa con las librerías. Importar una función de una librería de fechas incluye solo ese código, siempre que la librería se publique como ES modules.
Confusión frecuente
Se suele confiar en que tree shaking elimina todo lo que no se usa. Es conservador. Si un módulo podría tener efectos secundarios al cargarse, como registrar algo de forma global, el bundler lo conserva. Las librerías declaran que son seguras con el campo sideEffects de package.json. Las librerías publicadas solo como CommonJS son difíciles de analizar y tienden a incluirse completas.
La forma de escribir el código también importa. AngularJS registra controllers y servicios por nombre, como strings, en un módulo global, así que el bundler no puede saber cuáles se usan y la aplicación completa se incluye. Angular moderno está diseñado para lo contrario. Los componentes standalone importan lo que usan, y los servicios declarados con providedIn: 'root' se eliminan cuando nadie los inyecta.
La federación agrega una excepción. Una librería compartida entre un host y sus remotos normalmente se carga completa, porque el build no puede saber qué necesitará cada remoto. Comparte solo lo que deba existir como instancia única. Más en microfrontends.
Por qué importa. El código AngularJS no admite tree shaking de forma útil, así que el tamaño del bundle baja a medida que las pantallas pasan a Angular moderno. En una plataforma federada, la lista de librerías compartidas limita lo que tree shaking puede eliminar.
Términos relacionados
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn