¿Cómo ayuda la sacudida de árboles en Angular 2?

Primero tratemos de entender qué es Tree Shaking;

Es posible que haya encontrado Dead Code Elimination (vamos a referirlo como DCE), para resumir DCE, toma el producto terminado e intenta eliminar los bits que no desea.

Sacudir los árboles, por otro lado, hace la pregunta opuesta: dado que quiero hacer un pastel, ¿qué partes de qué ingredientes necesito incluir en el tazón? Es una forma de limpiar su proceso de agrupación excluyendo el código que no está utilizando. La idea de sacudir los árboles ha comenzado a ganar fuerza en el mundo de JavaScript gracias al proyecto Rollup de Rich Harris.

Rollup es un paquete de módulos de JavaScript. La característica más exclusiva de Rollup es el hecho de que solo requiere módulos que realmente haya importado en alguna parte. Esto significa que el código no utilizado nunca llega al paquete.

¿Cómo funciona? Los pasos involucrados en el movimiento de los árboles son bastante simples.

  • Escribe su código ES6 de forma normal, importando y exportando módulos según sea necesario. Cuando llega el momento de crear un paquete, Webpack toma todos sus módulos y los coloca en un solo archivo, pero elimina la export del código que no se importa a ninguna parte.
  • Luego, ejecuta un proceso de minificación, lo que resulta en un paquete que excluye cualquier código muerto encontrado en el camino.

Esto reduce el tamaño de tu paquete.

¿Qué tan útil es esto en Angular2?

Angular 2 es un marco masivo. ¡Una aplicación simple y no optimizada “Hello world!” De Angular 2, incluida con browserify es de 1.6MB a 2.5MB! Supongo que ahora puedes ver cuán útil puede ser la sacudida de árboles en las aplicaciones de Angular 2.

Los enlaces a continuación, muestran maravillosamente Tree-Shaking en aplicaciones Angular 2 (y cómo hacer que el código esté listo para la producción) con un análisis del tamaño.

Construyendo una Aplicación Angular 2 para Producción

Optimice su aplicación Angular 2 con Tree Shaking

Referencias de sacudidas de árboles:

Sacudida de árboles versus eliminación de código muerto

Cómo limpiar tu compilación de JavaScript con Tree Shaking

AngularJS

En retrospectiva, existía la posibilidad de crear aplicaciones web muy avanzadas utilizando la API de JavaScript pura, pero fue realmente difícil mantener la base de código inicial y probar todo. Y luego, en 2010, se introdujo AngularJS como JavaScript MVW Framework. Tenía grandes ventajas de árbol que hicieron que la gente lo amara:

  • La producción de código fue incomparablemente rápida
  • Cada pieza de aplicación fue fácilmente comprobable
  • Google estuvo detrás del proyecto

Hay otras cosas que hacen que Angular sea tan bueno para los programadores. El primero es el enlace de datos bidireccional. Angular le permitió ver los datos modificados en JavaScript para reflejarse automáticamente en la interfaz de usuario. Al principio, las cosas eran mucho más fáciles de desarrollar, porque no se requería más codificación, excepto para vincular un controlador adecuado a la parte de HTML. El segundo beneficio que Angular brinda a los programadores son las directivas. Son el punto de partida para todos los componentes que vemos ahora en el front-end moderno. Las directivas permitieron que el código fuera mucho más reutilizable y separado que nunca. AngularJS forzó una inyección de dependencia, y ayudó a burlarse de las dependencias. Su aparición en el marco hizo que Angular fuera un gran paso adelante en el caso de probar aplicaciones front-end.

Todas estas ventajas llevaron a más y más compañías a reescribir sus aplicaciones desde sus propias soluciones construidas sobre otras bibliotecas a AngularJS.

ANGULAR 2

AngularJS es una excelente manera de iniciar una aplicación o MVP. Con una creciente popularidad y más y más características llegando al núcleo, el equipo de Angular decidió reescribir el marco original, presentando Angular 2. Algunos dicen que Angular 2 y AngularJS comparten solo una cosa: el nombre. Hay una ruta de migración (llamada ng-upgrade ) de AngularJS a Angular 2. Sin embargo, Angular 2 sigue siendo un marco completamente nuevo que comparte solo algunos conceptos de su predecesor.

Todo el concepto de estructura de la aplicación ha cambiado en Angular 2. Anteriormente, era el marco MVC el que le permitía crear aplicaciones en el patrón de entidades bastante estrechamente acopladas como controladores, vistas, servicios, etc. Ahora, el concepto de directivas ha sido impulsado además de estar mucho más cerca del estándar de Web Components y la forma de React de estructurar la aplicación. Se trata de componentes en Angular 2. Significa que toda la aplicación ahora es un componente, que contiene otro conjunto de componentes (que pueden ser enrutables). Termina con una estructura en forma de árbol

El propósito de la arquitectura de la aplicación Angular 2 es crear componentes que no dependan unos de otros, que estén lo más acoplados posible.

Lo importante es introducir dos formas de crear los componentes:

  • Componentes inteligentes: conocen el estado de la aplicación y pueden comunicarse con los servicios para obtener o modificar datos.
  • Componentes tontos: solo deben tener entradas y salidas. Están listos para colocarse en cualquier parte del sistema (o incluso fuera de él) al proporcionar valores adecuados a la entrada, y no deben saber sobre la existencia del estado de la aplicación.

ACTUACIÓN

Tener un árbol de componentes de este tipo hace una gran diferencia en el rendimiento. El objetivo con AngularJS no era crear el marco más eficiente, sino el más fácil de escribir. A medida que el rendimiento se convirtió en un problema, se introdujo Angular 2 para resolver el problema. AngularJS tenía un ciclo de resumen , que permitía que los cambios activaran las actualizaciones hacia arriba y hacia abajo. Angular 2, por otro lado, tiene un gráfico direccional de componentes que siempre se verifica una vez (debido a una ruta transversal desde la raíz hasta las hojas). Según los miembros del equipo central de Angular, estos cambios hicieron que las aplicaciones de Angular 2 funcionen entre 3 y 10 veces más rápido que las mismas aplicaciones creadas con el último AngularJS.

ECOSISTEMA

Angular ahora se considera más que nunca un marco. La herramienta que nos brindó el equipo de Angular es una solución completa. Esto es lo opuesto a React (que es solo una biblioteca para renderizar un componente), pero aquí podemos crear aplicaciones completas sin usar soluciones de terceros. El marco nos proporciona los siguientes bloques para usar:

  • Componente: el principal y el más importante. Angular 2 se trata de componentes y modularización. Estos son los bloques principales para crear aplicaciones. Contiene la lógica y la vista.
  • Directiva: es muy similar al componente, pero no contiene una plantilla (vista). Simplemente realiza operaciones adicionales a los elementos DOM existentes.
  • Pipe: le brinda la capacidad de procesar variables en plantillas de una manera específica.
  • Servicio: clase inyectable utilizada para compartir la lógica entre componentes. Generalmente (y preferiblemente) es una capa entre el componente y la API.
  • Formularios: una solución compleja para manejar formularios en la aplicación. Esta vez puede elegir entre dos estilos: modelo basado y modelo.
  • HTTP: un servicio creado sobre los observables para manejar la conexión entre el front-end y la API.
  • Enrutador: ahora enrutamiento directo a los componentes.
  • Pruebas: un conjunto completo de herramientas para pruebas unitarias y de extremo a extremo, listas para manejar escenarios con todos los bloques anteriores.

El JavaScript moderno va más allá de los navegadores web. Ahora escuchará sobre la representación del lado del servidor y las aplicaciones móviles nativas creadas con JavaScript. En Angular 2 hay muchos otros proyectos conectados al núcleo, que vale la pena mencionar y merecen su propia historia:

  • Angular Universal: representación del lado del servidor.
  • CLI angular: interfaz de línea de comandos para iniciar un proyecto.
  • NativeScript 2: aplicaciones móviles nativas.
  • Ionic 2: aplicaciones móviles que utilizan la vista web.
  • Codelyzer: revestimiento específico para Angular 2.
  • ngrx – programación reactiva.

Todo hace de Angular no solo un marco, sino toda una plataforma.

Fuente – Angularjs vs Angular2 | cual es la diferencia ?

Tree Shaking nos ayuda a reducir el peso de la aplicación, si solo queremos crear la aplicación “Hello World” en AngularJs 2, tomará alrededor de 2.5MB.

al realizar sacudidas de árbol, Webpack elimina los enlaces y UglifyJsPlugin elimina el código.

Fuente:

Optimice su aplicación Angular 2 con Tree Shaking