Tests unitarios en AngularJS
Te enseñamos de forma práctica qué son los test unitarios, su importancia y cómo realizarlos para comprobar que el código funciona correctamente.
Aprende paso a paso a cómo optimizar aplicaciones en Angular, para hacerla más ligeras y trabaje mejor.
Tabla de contenidos
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
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”,
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’;
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.
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.
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.
También te puede interesar
Te enseñamos de forma práctica qué son los test unitarios, su importancia y cómo realizarlos para comprobar que el código funciona correctamente.
Aprende y pon en práctica las guías necesarias para poder asegurar la legibilidad, mantenibilidad y escalabilidad en una...