El rendimiento de cualquier aplicación es uno de los factores clave para determinar la experiencia del usuario en este mundo. Si el rendimiento es bajo, la aplicación no logrará su valor real para el usuario. Por lo tanto, existen diversas prácticas que se recomienda adoptar durante la codificación para lograr un mayor rendimiento en el entorno de producción.
Del mismo modo, el framework Angular también brinda varias opciones para lograr un mayor rendimiento en tiempo de ejecución. Algunos de estos son la compilación AOT, la agrupación, la minificación, etc. En la compilación AOT , el compilador Angular se ejecuta antes de que se implemente la aplicación, lo que reduce el tamaño total de la aplicación. Pero esto no sucede de forma predeterminada con el marco Angular.
Ahora, hablemos de los procesos predeterminados que adopta el marco Angular que ayuda al desarrollador a lograr un mayor rendimiento, es decir, agrupación y minificación. Vamos a hablar de ellos en detalle a continuación:
La agrupación y la minificación son dos procesos importantes que adopta Angular para reducir el tamaño de la aplicación para que pueda descargarse rápidamente en el navegador.
Agrupación:
- En Bundling, todos los archivos js dentro de la aplicación se descargan como una sola unidad en lugar de descargar cada archivo js, lo que en general reduce el tiempo total de descarga de la aplicación y, por lo tanto, logra un mayor rendimiento.
- Tomemos un ejemplo para entenderlo:
supongamos que mi aplicación tiene tres archivos js dentro de mi aplicación. Entonces, cuando se implementa la aplicación, el marco Angular por defecto todos estos tres archivos js en un solo archivo, lo que reduce el tamaño de la aplicación y ahora se descarga rápidamente dentro del navegador del usuario.
Minificación: en el proceso de minificación, se realizan las siguientes cosas dentro del archivo js para reducir el tamaño del archivo js para una descarga más rápida.
- Elimina todos los espacios en blanco dentro del archivo.
- Elimina todas las variables no deseadas dentro del archivo.
- Convierte todos los nombres de variables grandes en nombres de variables más pequeños.
Al hacer todas estas cosas, el marco Angular reduce el tamaño total del archivo js. Además, el marco Angular agrega .min al nombre del archivo para indicar la minificación de ese archivo en particular.
Tomemos un ejemplo para comprender mejor el proceso de minificación.
módulo.js:
Javascript
module.exports = function(module) {
if (!module.webpackPolyfill) {
module.deprecate = function() {};
module.paths = [];
// module.parent = undefined by default
if (!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
module.webpackPolyfill = 1;
}
return module;
};
El código minimizado por el marco Angular cuando ejecuta ng build –prod es:
módulo.min.js:
Javascript
module.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e};
Entonces, como puede ver en la versión minimizada, se eliminaron todos los espacios en blanco, el nombre de las variables se acortó. Por lo tanto, reducir el código a un solo código de línea disminuye el tamaño total del archivo js y la aplicación.
Por lo tanto, la minificación y la agrupación son en realidad procesos interrelacionados que ayudan a reducir el tamaño del archivo js para que se descargue más rápido en el navegador y brinde una experiencia agradable al usuario. Estos son el pilar básico del marco Angular cuando se trata de aumentar el rendimiento general de la aplicación.