Una aplicación angular consiste principalmente en plantillas HTML, cuyos componentes incluyen varios archivos TypeScript. Hay algunas pruebas unitarias y archivos de configuración. Cada vez que ejecutamos una aplicación, el navegador no puede entender el código directamente, por lo que tenemos que compilar nuestro código.
¿Qué es el compilador Ahead of Time (AOT)?
All technologies Ahead of Time es un proceso de compilación de lenguaje de nivel superior o lenguaje intermedio en un código de máquina nativo, que depende del sistema.
En palabras simples, cuando sirve/construye su aplicación angular, el compilador Ahead of Time convierte su código durante el tiempo de compilación antes de que su navegador descargue y ejecute ese código. Desde Angular 9, la opción de compilación predeterminada se establece en verdadero para el compilador anticipado.
¿Por qué debería usar el compilador Ahead of Time?
- Cuando utiliza Ahead of Time Compiler, la compilación solo ocurre una vez, mientras construye su proyecto.
- No tenemos que enviar las plantillas HTML y el compilador Angular cada vez que ingresamos un nuevo componente.
- Puede minimizar el tamaño de su aplicación.
- El navegador no necesita compilar el código en tiempo de ejecución, puede renderizar directamente la aplicación inmediatamente, sin esperar a compilar la aplicación primero, por lo que proporciona una renderización de componentes más rápida.
- El compilador Ahead of time detecta el error de plantilla antes. Detecta y notifica errores de vinculación de plantillas durante los pasos de compilación antes de que los usuarios puedan verlos.
- AOT proporciona una mejor seguridad. Compila componentes HTML y plantillas en archivos JavaScript mucho antes de que se muestren en la pantalla del cliente. Por lo tanto, no hay plantillas para leer ni una evaluación HTML o JavaScript arriesgada del lado del cliente. Esto reducirá las posibilidades de ataques de inyecciones.
¿Cómo funciona Ahead of Time?
Usamos Typescript, HTML, hojas de estilo para desarrollar nuestro proyecto Angular y ng build –prod o ng build para compilar nuestro código fuente en paquetes que incluyen archivos JS, index.html, hojas de estilo y archivos de activos.
Ahora Angular usa el compilador angular (el que hayas seleccionado) para crear el código fuente y lo hace en tres fases, que son el análisis del código, la generación del código y la verificación del tipo de plantilla. Al final de este proceso, el tamaño del paquete será mucho más pequeño que el tamaño del paquete del compilador JIT.
Después de eso, AOT construye esto en un archivo war para implementarlo directamente usando Heroku o JBoss o cualquier otro alojamiento que admita Node. Y luego asignamos este host al dominio usando un CNAME.
Ahora los clientes pueden acceder a su aplicación web a través del dominio. El navegador descargará todos los archivos necesarios, como HTML, hojas de estilo y JavaScript, que se necesitan para la vista predeterminada. Por fin, su aplicación se iniciará y se renderizará.
Cómo compilar su aplicación en el compilador antes de tiempo: para compilar su aplicación antes de tiempo, no tiene que hacer mucho, porque la opción de compilación predeterminada angular 9 está configurada en Antes de tiempo. Simplemente agregue –AoT al final ng serve –aot.
¿Qué es el compilador Just in Time (JIT)?
El compilador justo a tiempo proporciona compilación durante la ejecución del programa en un tiempo de ejecución antes de la ejecución. En palabras simples, el código se compila cuando es necesario, no en el momento de la compilación.
¿Por qué y cuándo debería usar Just In Time Compiler?
- El compilador justo a tiempo compila cada archivo por separado y se compila principalmente en el navegador. No tienes que volver a construir tu proyecto después de cambiar tu código.
- La mayor parte de la compilación se realiza en el lado del navegador, por lo que tomará menos tiempo de compilación.
- Si tiene un gran proyecto o una situación en la que algunos de sus componentes no se usan la mayor parte del tiempo, entonces debe usar el compilador Justo a tiempo.
- El compilador Just in Time es mejor cuando su aplicación está en desarrollo local.
¿Cómo funciona el compilador Just in Time?
Inicialmente, el compilador era responsable de convertir un lenguaje de alto nivel en lenguaje de máquina, que luego se convertiría en código ejecutable.
El compilador justo a tiempo, compila el código en tiempo de ejecución, lo que significa que en lugar de interpretar el código de bytes en el momento de la compilación, compilará el código de bytes cuando se llame a ese componente.
Algunos puntos importantes:
- En el caso de Justo a tiempo, no todo el código se compila en el momento inicial. Solo se compilarán los componentes necesarios que se necesitarán al inicio de su aplicación. Luego, si la funcionalidad es necesaria en su proyecto y no está en código compilado, esa función o componente se compilará.
- Este proceso ayudará a reducir la carga de la CPU y hará que su aplicación se renderice más rápido.
- Una cosa más interesante es que puede ver y vincular su código fuente en el modo de inspección porque Just in Time compila su código con el modo JIT y un archivo de mapa.
Comparación entre Ahead of Time (AOT) y Just in Time (JIT) –
| JAT | AOT |
|---|---|
| JIT descarga el compilador y compila el código exactamente antes de mostrarlo en el navegador. | AOT ya cumplió con el código mientras creaba su aplicación, por lo que no tiene que compilar en tiempo de ejecución. |
| La carga en JIT es más lenta que en AOT porque necesita compilar su aplicación en tiempo de ejecución. | Cargar en AOT es mucho más rápido que JIT porque ya ha compilado su código en el momento de la compilación. |
| JIT es más adecuado para el modo de desarrollo. | AOT es muy adecuado en el caso del modo de producción. |
| El tamaño del paquete es mayor en comparación con AOT. | Tamaño del paquete optimizado en AOT, en los resultados, el tamaño del paquete AOT es la mitad del tamaño de los paquetes JIT. |
|
Puede ejecutar su aplicación en JIT con este comando: ng build OR ng serve |
Para ejecutar su aplicación en AOT, debe proporcionar –aot al final como: ng build --aot OR ng serve --aot |
| Puede detectar un error de enlace de plantilla en el momento de la visualización. | Puede detectar el error de la plantilla al crear su aplicación. |
Conclusión: puede compilar su aplicación angular de dos maneras: JIT y AOT. Ambos son adecuados para un escenario diferente, ya que puede usar JIT para el modo de desarrollo y AOT es mejor en el modo de producción. La implementación de funciones y la depuración son fáciles en el modo JIT, ya que debe asignar archivos mientras que AOT no lo tiene. Sin embargo, ese AOT brinda un gran beneficio a los desarrolladores angulares para el modo de producción al reducir el tamaño del paquete y hacer que su aplicación se procese más rápido.
Publicación traducida automáticamente
Artículo escrito por ifourtechnolab y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA