Cómo optimizar aplicaciones en Angular

Aprende paso a paso a cómo optimizar aplicaciones en Angular, para hacerla más ligeras y trabaje mejor. 

Publicado el 29 de Mayo de 2018
Compartir

Creación de una aplicación en Angular

Vamos a ver rápidamente cómo optimizar una aplicación realizada con Angular, detectando dónde se encuentran esas librerías que hemos podido importar por error o bien posibles fallos que hemos cometido.

Comenzamos creando con Angular CLI una nueva aplicación, llamada sorce-map-explorer, para darle el mismo nombre de la librería que emplearemos para visualizar todas las librerías utilizadas y lo que ocupa cada una de ellas. La crearemos de la siguiente forma:

ng new source-map-explorer

Imagen 0 en Cómo optimizar aplicaciones en Angular

Instalación de la librería source-map-explorer

Después iremos a nuestro proyecto e instalar la librería indicada anteriormente, de esta forma:

npm install -g source-map-explorer

Una vez la tenemos instalada, vamos a crear un comando de npm para nuestro proyecto, lo que hacemos declarando en el archivo package.json:

“sme”: “./node_modules/.bin/source-map-explorer”,

Introducción de errores de prueba

A continuación, a forma de gazapo, vamos a importar la librería completa de rxjs y la librería completa de lodash en el archivo app.module.ts, algo que nos puede ocurrir por error y que ocupan un espacio innecesario:

import ‘lodash’;
import ‘rxjs’;

Imagen 1 en Cómo optimizar aplicaciones en Angular

Comprobación de errores

Para detectar estos errores, pasamos a compilar la aplicación con ng build.

Os recordamos que en la nueva versión de Angular, nuestra build aparece indicado en outputPath, dentro del archivo angular.json.

Una vez compilada nuestra aplicación vemos que ocupa 3.59 MB, lo que nos lleva a pensar que algo extraño ocurre en la misma. Para comprobar por qué ocupa tanto, vamos a ejecutar la aplicación creada anteriormente, indicando el directorio en el que se ha guardado la aplicación y la ruta al archivo que queramos comprobar, en este caso vendor.js.

npm sme .\dist\source-map-explorer\vendor.js

Tras ejecutar este comando, se abrirá una web en la que veremos, de forma muy visual, lo que ocupa cada paquete de nuestra aplicación. Así podremos detectar fácilmente qué librerías no estamos utilizando y ocupan mucho espacio, en este las dos librerías que importamos anteriormente para realizar este ejemplo.

Podemos repetir el mismo proceso pero con otro fichero, por ejemplo main.js, para ver qué componentes de nuestra build ocupan demasiado espacio.

Corrección de errores

Para corregir los errores de este caso de prueba, eliminaríamos del archivo app.module.ts las librerías lodash y rxjs, que son las que no se están utilizando y ocupan mucho espacio. Después volveríamos a compilar nuestra aplicación con ng build, sin pasarla aún a producción.

Una vez compilada, repetimos el proceso para comprobar lo que ocupa cada paquete.

npm sme .\dist\source-map-explorer\vendor.js

Y comprobamos ahora que nuestra aplicación ocupa menos espacio tras eliminar las librerías que no eran necesarias.

Conclusión

Como veis, de esta forma es bastante sencillo, utilizando la librería sorce-map-explorer, detectar dónde tenemos un problema de este tipo en nuestra aplicación.


Compartir este post

También te puede interesar...

Tecnología

Comparativa Arduino vs Particle vs Raspberry Pi

11 Mayo 2023 Diego Caceres Solis
Tecnología

Aprende a crear un Blockchain con JavaScript

18 Mayo 2023 Alfredo Barragán
Tecnología

Cómo aplicar técnicas de clean code en Java 18

10 Mayo 2023 Jorge López Blasco

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información.