Angular: anàlisi de rendiment amb webpack Bundle Analyzer

Bloc

Angular: anàlisi de rendiment amb webpack Bundle Analyzer

El rendiment web és possiblement una de les parts més importants a tenir en compte per a una aplicació web moderna. El cas és que és més fàcil que mai afegir mòduls i eines de tercers als nostres projectes, però això pot comportar un enorme compromís amb el rendiment.



Això es fa encara més difícil a mesura que es fa més gran un projecte; per tant, aquest article analitza com utilitzar el paquet webpack Bundle Analyzer amb Angular per ajudar a visualitzar d’on prové el codi del paquet final.

Desglossament de vídeo

Aquí teniu un vídeo que vaig gravar que desglossa aquest mateix tema:



Nou projecte i addició de dependències

Per establir una base comuna, crearem una nova aplicació Angular i afegirem algunes dependències:

# Install the Angular CLI globally $ npm i @angular/cli -g # Create a new Angular project of your choosen name && change directory $ ng new AngularBundleAnalyser > N > SCSS $ cd AngularBundleAnalyser $ npm i moment $ npm i firebase # Open this up in VS Code $ code . && ng serve

Després podem dirigir-nos a app.component.ts i importeu-les al nostre paquet main.js:



import { Component, OnInit } from '@angular/core'; import * as moment from 'moment'; import * as firebase * from 'firebase'; @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); } }

El nostre paquet ha passat d’uns 9 KB a 24 KB. Hauríem d’analitzar-ho per veure què podem fer per aconseguir-ho. Instal·lem el connector webpack-bundle-analyzer:

$ npm i webpack-bundle-analyzer -D

Edifici amb stats.json

La CLI Angular ens dóna la possibilitat de construir amb un stats.json fora de la caixa. Això ens permet passar-ho al nostre analitzador de paquets i iniciar el procés.

Podem afegir un nou script a package.json per afegir aquesta funcionalitat:

'scripts': { 'build:stats': 'ng build --stats-json' }

Ara podem executar npm run build:stats per generar un stats.json fitxer dins del dist carpeta Fem això:

$ npm run build:stats

Anàlisi de paquets

Podem fer-ne un altre script que executa el webpack-bundle-analyzer amb el stats.json:

'scripts': { 'analyze': 'webpack-bundle-analyzer dist/AngularBundleAnalyser/stats.json' }

Executeu l'analitzador amb l'ordre següent:

$ npm run analyze

Aleshores hauríeu de poder veure l'anàlisi a localhost:8888:

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

UH oh. Això ens indica que hauríem de fer una feina millor eliminant els elements no utilitzats del nostre paquet. Vegem aquest exemple només important initializeApp de firebase:

import { Component, OnInit } from '@angular/core'; import * as moment from 'moment' import { initializeApp } 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 = {}; initializeApp(firebaseConfig); } }

Això marca la següent diferència dins de la nostra anàlisi de paquets:

Resum

Feu-vos-ne un amb el vostre paquet. Compreneu què podeu fer perquè sigui més petit i optimitzat encara més. El webpack-bundle-analyzer l'eina és perfecta per a això!

teclat matemàtic per a Android

#angular #webpack # desenvolupament web

alligator.io

Angular: anàlisi de rendiment amb webpack Bundle Analyzer

El rendiment web és possiblement una de les parts més importants a tenir en compte per a una aplicació web moderna. El cas és que és més fàcil que mai afegir mòduls i eines de tercers als nostres projectes, però això pot comportar un enorme compromís amb el rendiment.