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

Cómo optimizar aplicaciones en Angular

Samuel Comino
  • Escrito por Samuel Comino el 29 de Mayo de 2018
  • 2 min de lectura | Frameworks
Cómo optimizar aplicaciones en Angular
El reproductor de video será cargado en breves instantes.

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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Tests unitarios en AngularJS

Tests unitarios en AngularJS

Frameworks

18 de Octubre de 2018

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.

Curso de buenas prácticas en Angular

Curso de buenas prácticas en Angular

curso

Con este curso aprenderás:

  • Introducción
  • Angular CLI archivo de configuración
  • Tslint para hacer tu aplicación mantenible

Duración: 2 horas y 4 minutos

Curso de Angular 6

Curso de Angular 6

curso

Con este curso aprenderás:

  • Instalación y configuración de un proyecto de Angular
  • Conocimientos básicos de Typescript
  • Componentes de Angular

Duración: 6 horas y 9 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars