Compilación Just-in-Time (JiT) vs Ahead-of-Time (AoT) en Angular

Me refería a esta documentación y encontré el concepto de compilación. Se puede utilizar la compilación JIT o AOT. Sin embargo, lo encontré muy breve y necesito conocer los siguientes puntos en detalle,

• Diferencias entre esas dos técnicas
• Recomendación sobre cuándo usar qué

JIT: compila TypeScript justo a tiempo para ejecutarlo.

• Compilado en el navegador.
• Cada archivo se compila por separado.
• No es necesario compilar después de cambiar su código y antes de volver a cargar la página del navegador.
• Apto para desarrollo local.

AOT: compila TypeScript durante la fase de compilación.

• Compilado por la propia máquina, a través de la línea de comando (más rápido).
• Todo el código compilado en conjunto, insertando HTML / CSS en los scripts.
• No es necesario implementar el compilador (la mitad del tamaño angular).
• Fuente original más segura no divulgada.
• Adecuado para construcciones de producción.

Aunque hay algunas respuestas, me gustaría agregar algunos de mis hallazgos también, porque estaba realmente confundido con lo que realmente se está compilando, ya que en todos los casos, TS-> JSocurre la conversión. Tomo un párrafo del blog de Jeff como referencia.

JIT

El TScódigo escrito por el desarrollador se compila en JScódigo. Ahora, el jsnavegador vuelve a compilar este código compilado para que htmlse pueda representar dinámicamente según la acción del usuario y, en consecuencia, los códigos para angular (componentes, detección de cambios, inyección de dependencia) también se generan en tiempo de ejecución.

(El compilador del navegador es lo que toma las directivas y los componentes de una aplicación, junto con su HTML y CSS correspondientes, y crea fábricas de componentes para eliminar rápidamente las instancias con toda su lógica de creación de vistas).

Cuando se arranca una aplicación Angular 2 en el navegador, el compilador JIT realiza mucho trabajo para analizar los componentes de la aplicación en tiempo de ejecución y generar código en la memoria. Cuando se actualiza la página, todo el trabajo que se ha realizado se tira a la basura y el compilador JIT vuelve a hacer el trabajo.

AOT

El TScódigo escrito por el desarrollador está compilado en JScódigo, esto también js ha sido compilado para angular . Ahora, el navegador vuelve a compilar este jscódigo compilado para que htmlse pueda procesar. Pero, el problema aquí es que el compilador angularya se ha ocupado de las características de AOTy, por lo tanto, el navegador no tiene que preocuparse mucho por la creación de componentes, la detección de cambios o la inyección de dependencias. Entonces tenemos :

Renderizado más rápido

Con AOT, el navegador descarga una versión precompilada de la aplicación. El navegador carga el código ejecutable para que pueda procesar la aplicación inmediatamente, sin esperar a compilar la aplicación primero.

Menos solicitudes asincrónicas

El compilador integra plantillas HTML externas y hojas de estilo CSS dentro de la aplicación JavaScript, eliminando solicitudes ajax separadas para esos archivos fuente.

Tamaño de descarga de marco angular más pequeño

No es necesario descargar el compilador Angular si la aplicación ya está compilada. El compilador es aproximadamente la mitad de Angular, por lo que omitirlo reduce drásticamente la carga útil de la aplicación.

Detecte errores de plantilla antes

El compilador AOT detecta y notifica errores de enlace de plantillas durante el paso de compilación antes de que los usuarios puedan verlos.

Mejor seguridad

AOT compila plantillas y componentes HTML en archivos JavaScript mucho antes de que se sirvan al cliente. Sin plantillas para leer y sin evaluaciones de JavaScript o HTML del lado del cliente riesgosas, hay menos oportunidades de ataques de inyección.

Las diferencias restantes ya están cubiertas en viñetas de Benyamin, Nisar y Gaurang.

Sientase libre de corregirme

Benyamin y Nisar mencionaron algunos buenos puntos aquí. Lo agregaré.

Aunque teóricamente, AOT parece una opción atractiva que JIT para fines de producción, ¡pero tenía mis dudas de si AOT realmente valía la pena!

Bueno, encontré buenas estadísticas de Jeff Cross y demuestra que AOT reduce significativamente el tiempo de arranque de la aplicación. A continuación, el complemento de la publicación de Jeff Cross le dará una idea rápida al respecto,

Compilación JiT (Just in Time)

El nombre en sí describe el funcionamiento, compila el código justo en el momento de cargar la página en el navegador. El navegador descargará el compilador, creará el código de la aplicación y lo procesará.

Será bueno para el entorno de desarrollo.

Compilación AoT (Ahead of Time)

Compila todo el código al momento de construir la aplicación. Entonces, el navegador no quiere descargar el compilador y compilar el código. En este método, el navegador puede representar fácilmente la aplicación simplemente cargando el código ya compilado.

Se puede utilizar en el entorno de producción.

Podemos comparar la compilación JiT y AoT como se muestra a continuación

JIT (compilación Just-in-Time)

Just-in-Time (JIT) es un tipo de compilación que compila su aplicación en el navegador en tiempo de ejecución.

ng build
ng serve

AOT (compilación anticipada)

Ahead-of-Time (AOT) es un tipo de compilación que compila su aplicación en el momento de la compilación.

ng build --aot
ng serve --aot

Al final del día, AOT (Ahead-of-Time) y JIT (Just-in-Time) hacen lo mismo. Ambos compilan su código Angular para que pueda ejecutarse en un entorno nativo (también conocido como el navegador). La diferencia clave es cuando ocurre la compilación. Con AOT, su código se compila antes de descargar la aplicación en el navegador. Con JIT, su código se compila en tiempo de ejecución en el navegador.

Aquí está la comparación:

Beneficios de AOT:

• El inicio más rápido ya que el análisis y la compilación no ocurren en el navegador.
• Las plantillas se verifican durante el desarrollo (lo que significa que todos los errores que vemos en la consola de JavaScript en las aplicaciones en ejecución, de lo contrario, se incluirán en nuestro proceso de compilación).
• Tamaño de archivo más pequeño, ya que las funciones no utilizadas se pueden eliminar y el compilador no se envía.

En realidad, solo hay un compilador Angular. La diferencia entre AOT y JIT es una cuestión de tiempo y herramientas. Con AOT, el compilador se ejecuta una vez en el momento de la compilación utilizando un conjunto de bibliotecas; con JIT, se ejecuta cada vez para cada usuario en tiempo de ejecución utilizando un conjunto diferente de bibliotecas.

Compilador JIT que usamos durante el desarrollo del proyecto angular. En esta compilación (conversión de TS a JS) ocurre durante el tiempo de ejecución de la aplicación. Mientras que AOT se usa durante la construcción del código de la aplicación para la implementación de la aplicación en producción, esa vez construimos el código de nuestra aplicación usando el comando ng build --prod que genera una carpeta llamada webpack, webpack contiene el paquete de todos los archivos (HTML , CSS y mecanografiado) en formato javascript comprimido.

El tamaño de la carpeta del paquete web generado para la producción es mucho menor que el de la carpeta generada para el entorno de desarrollo (usando el comando ... ng build), porque no contiene el compilador dentro de la carpeta del paquete web, mejora el rendimiento de la aplicación .