Frameworks

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

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’;

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.