Actualmente estamos tratando de optimizar una aplicación angular compleja (rendimiento y tamaño del paquete).
Descubrimos que tenemos componentes parcialmente sin usar, pero no estamos 100% seguros de ellos. De todos modos ... La pregunta que nos hacemos actualmente es cómo funciona exactamente el movimiento de árboles en Angular.
Pregunta 1) Si hay entradas dentro de la matriz de declaraciones, importaciones o proveedores de un módulo, pero el módulo no se usa en ninguna parte, ¿también se eliminan con la sacudida del árbol o se incluyen en el paquete final?
Ejemplo:
@NgModule({ imports: [ FirstModule, SecondModule // Is not used anymore (probably) but imported here ], declarations: [SampleComponent] // Is not used anymore (probably) but imported here }) export class SampleModule { }Información: Las rutas a esos módulos/componentes ya están eliminadas.
Pregunta 2) ¿Es suficiente eliminar solo estos componentes de los módulos de enrutamiento para que el proceso de agitación del árbol sea exitoso?
Pregunta 3) ¿Qué debe implementarse para que el proceso de sacudir árboles funcione de manera óptima?
Versión angular usada 8.2
Acerca de cómo funciona el movimiento de árboles en Angular
Tree-shaking se realiza principalmente en la etapa de minificación y no es específico de Angular. terser es el minificador que usan en Angular CLI, que es una bifurcación de Uglify que admite la sintaxis de ES6.
terser lee su código y, si no se hace referencia a él en otro lugar, y puede estar seguro de que eliminar algún código no tendrá efectos secundarios, eliminará ese código.
terser no puede estar seguro de si las clases con decoradores tienen o no efectos secundarios solo al definirse (los decoradores son llamadas a funciones). En la compilación de producción de Angular, tienen un complemento de paquete web llamado "optimizador de compilación" que irá a los lugares donde se usan sus decoradores y agregará un comentario especial /*@__PURE__*/ junto al javascript compilado (de Typescript) que terser reconoce y elimine la clase decorada (si no se hace referencia a ella en otro lugar).
Acerca de la eliminación de componentes del NgModule
El proceso de compilación simplemente comienza desde su archivo main.ts y rastrea todas las importaciones de todos los archivos que se incluirán en su compilación. Si, desde el archivo main.ts, su archivo componente nunca es importado por ninguno de los archivos que encuentra el proceso de rastreo, nunca se incluirá. Eso no es sacudir los árboles, simplemente no está incluido en el proceso de construcción.
Si su archivo de módulo es el único lugar donde se importa el archivo del componente, eliminar esa importación será suficiente para no incluir el componente en su compilación.
Acerca de las cosas que puedes hacer
Puede realizar algunos cambios específicos de Angular para asegurarse de compilar solo el código que usa.
{providedIn: root} para Injectable y elimine los lugares en los que el servicio inyectable, la protección, lo que sea, de los providers: [] . Además, en el sitio de la llamada (no en la definición), es posible que pueda marcar cualquier función sin efectos secundarios con el comentario /@__PURE__/ de modo que, incluso si se las llama en alguna parte, si el valor de retorno se puede eliminar a través de alguna otra optimización, la función también podría eliminarse. No he probado esto, pero en teoría debería funcionar.
No sé cómo todas las diversas etapas de compilación transforman su código y si mueven o eliminan comentarios antes de que terser pueda verlos.
Puede probarlo con esta herramienta de juegos: https://terser-playground.surge.sh/
Pruébalo con este ejemplo:
(function() { const a = 1; const b = 2; const c = /*@__PURE__*/ test(); console.log(a + b); }()); function test() { return 3 }Puede usar webpack-bundle-analyzer que lo ayudará a visualizar el tamaño y los diferentes componentes utilizados en su archivo de salida final. de esta manera, estará seguro de si un módulo se usa o no y luego puede eliminarlo de manera segura.