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,
Respuestas:
JIT: compila TypeScript justo a tiempo para ejecutarlo.
AOT: compila TypeScript durante la fase de compilació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.
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.
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:
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 .