Cómo utilizar el analizador de paquetes webpack para aplicaciones Angular

Introducción

La satisfacción del usuario se ve afectada por el rendimiento web, y este puede verse afectado por paquetes de gran tamaño. Cuando agregamos módulos de terceros a nuestros proyectos, cada una de las dependencias tiene sus propias dependencias que contribuyen al tamaño de un proyecto. Si no utilizamos toda la funcionalidad de estos módulos, están contribuyendo al tamaño de nuestro proyecto de manera innecesaria.

webpack Bundle Analyzeres una herramienta que puede ayudar a identificar los módulos que se utilizan en nuestro proyecto y ofrecer información sobre qué módulos se pueden eliminar.

En este artículo, aprenderá cómo usar webpack Bundle Analyzer con Angular para analizar un proyecto y realizar cambios sensibles para reducir el tamaño del proyecto.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Algunos conocimientos sobre la configuración de un proyecto Angular .

Este tutorial fue verificado con Node v16.2.0, npmv7.18.1, @angular/corev12.0.4 y webpack-bundle-analyzerv4.4.2.

Paso 1: Configuración del proyecto

Para establecer una base común, crearemos una nueva aplicación Angular y agregaremos algunas dependencias.

Primero, use @angular/clipara crear un nuevo proyecto:

ng new angular-bundle-analyzer-example --routing=false --style=css --skip-tests

Luego, navegue hasta el directorio del proyecto recién creado:

cd angular-bundle-analyzer-example

En este punto, podemos correr ng builda determinar el tamaño inicial de nuestro proyecto.

Output| Initial Total | 170.14 kB

Este tutorial se basará en dos paquetes para visualizar los beneficios de webpack-bundle-analyzer. Utilícelos npmpara instalar momenty firebase:

npm install moment@2.29.1 firebase@8.6.8

Abra app.component.tse importe momenten firebasenuestro main.jspaquete:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import * as moment from 'moment';import firebase from 'firebase';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent implements OnInit {  ngOnInit(): void {    const time = moment.utc();    const firebaseConfig = {};    firebase.initializeApp(firebaseConfig);  }}

Para evitar un error de compilación, también debemos eliminar el titleque se genera automáticamente con @angular/clien app.component.html:

src/aplicación/aplicación.componente.html

span{{ title }} app is running!/span

En este punto, podemos correr ng builda determinar el tamaño de nuestro paquete:

Output| Initial Total |  1.36 MB

Nuestro proyecto ha crecido de aproximadamente 170,14 kB a 1,36 MB. Deberíamos analizar esto para ver qué podemos hacer para reducirlo. Instalemos el webpack-bundle-analyzercomplemento:

npm install --save-dev webpack-bundle-analyzer@4.4.2

Paso 2 — Construir constats.json

La CLI de Angular nos brinda la posibilidad de compilar de manera stats.jsoninmediata. Esto nos permite pasar esto a nuestro analizador de paquetes y comenzar el proceso.

Podemos agregar un nuevo script para package.jsonagregar esta funcionalidad:

paquete.json

"scripts": {  "ng": "ng",  "start": "ng serve",  "build": "ng build",  "build:stats": "ng build --stats-json",  "watch": "ng build --watch --configuration development",  "test": "ng test"},

Ahora podemos ejecutar el siguiente comando:

npm run build:stats

Este comando generará stats.jsonun archivo en el directorio del proyecto dist.

Paso 3: Análisis del paquete

Podemos hacer otro scriptque se ejecute webpack-bundle-analyzercon el stats.json:

paquete.json

"scripts": {  "ng": "ng",  "start": "ng serve",  "build": "ng build",  "build:stats": "ng build --stats-json",  "analyze": "webpack-bundle-analyzer dist/angular-bundle-analyzer-example/stats.json",  "watch": "ng build --watch --configuration development",  "test": "ng test"},

Luego, ejecute el analizador con el siguiente comando:

npm run analyze

Este comando iniciará webpack-bundle-analyzer:

OutputWebpack Bundle Analyzer is started at http://127.0.0.1:8888Use Ctrl+C to close it

Y el análisis se visualizará en un navegador web:

¡Vaya! Este análisis indica que deberíamos hacer un mejor trabajo para eliminar los artículos no utilizados de nuestro paquete.

Paso 4: Aplicar cambios

Podemos revisarlo app.component.tsy modificarlo para importar solo firebasedesde firebase/app:

src/app/app.component.ts

import { Component, OnInit } from '@angular/core';import * as moment from 'moment';import firebase from 'firebase/app';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.scss']})export class AppComponent  implements OnInit {  ngOnInit(): void {    const time = moment.utc();    const firebaseConfig = {};    firebase.initializeApp(firebaseConfig);  }}

Guarde los cambios y ejecute el siguiente comando:

npm run build:stats

Luego, ejecute el siguiente comando:

npm run analyze

Y el análisis se visualizará en un navegador web:

El tamaño del proyecto ha cambiado de 1,36 MB a 563,13 kB.

Conclusión

En este artículo, aprendió a usar webpack Bundle Analyzer con Angular para analizar un proyecto y realizar cambios sensibles para reducir el tamaño del proyecto.

Continúe su aprendizaje sobre cómo reducir aún más el tamaño del proyecto con una configuración de webpack personalizada .