Анализ приложений Angular с помощью webpack

Development, Java | Amber | Комментировать запись

Впечатления пользователей от взаимодействия с вашим приложением во многом зависят от производительности сети. В свою очередь, производительность сети зависит от размеров передаваемых пакетов. Добавляя сторонние модули в проекты, вы должны помнить, что каждая из зависимостей имеет свои собственные зависимости, что в итоге отражается на размере проекта. Если приложение не использует все функции дополнительных модулей, размер проекта увеличивается, но без особой для него пользы.

webpack Bundle Analyzer – это инструмент, который поможет вам определить модули, которые используются в проекте, и те модули, которые можно сократить.

В этом руководстве вы узнаете, как использовать webpack для анализа проекта Angular и внесения разумных изменений, которые уменьшат размер проекта.

Требования

Чтобы выполнить это руководство, вам понадобится:

• Локальная установка Node.js. Инструкции зависят от дистрибутива, выберите свой: Mac OS, Ubuntu, CentOS, Debian.
• Базовое знакомство с настройкой проекта Angular.

Это руководство было проверено на пакетах Node v16.2.0, npm v7.18.1, @ angular / core v12.0.4 и webpack-bundle-analyzer v4.4.2.

1: Создание тестового проекта

Давайте создадим новое приложение Angular и добавим некоторые зависимости, чтобы потренироваться на нем.

Сначала используйте angular/cli для создания нового проекта:

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

Затем перейдите в только что созданный каталог проекта:

cd angular-bundle-analyzer-example

На этом этапе можно запустить команду ng build, чтобы определить исходный размер проекта.

| Initial Total | 170.14 kB

В этом руководстве для визуализации преимуществ webpack-bundle-analyzer мы добавим в наше приложение два пакета – это moment и firebase. При помощи npm установите их:

npm install moment@2.29.1 firebase@8.6.8

Откройте файл app.component.ts и импортируйте moment и firebase в main.js:

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);
  }
}

Чтобы предотвратить ошибку сборки, нужно удалить строку title, которая создается в app.component.html автоматически с помощью @angular/cli:

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

Теперь можно снова запустить ng build, чтобы определить размер пакета:

| Initial Total |  1.36 MB

Уже сейчас наш проект вырос с 170,14 КБ до 1,36 МБ. Теперь мы должны проанализировать ситуацию и разобраться, что мы можем сделать, чтобы снизить этот показатель. Установим плагин webpack-bundle-analyzer:

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

2: Сборка stats.json

Angular CLI дает нам возможность выполнять сборку stats.json из коробки. Благодаря этому мы можем передать анализатору пакетов все необходимое и запустить процесс.

Давайте добавим новый скрипт в package.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"
},

Теперь мы можем запустить следующую команду:

npm run build:stats

Эта команда сгенерирует файл stats.json в каталоге dist проекта.

3: Анализ пакета приложения

Затем мы можем создать еще один скрипт, который будет запускать анализатор webpack с файлом stats.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"
},

После чего мы можем запустить анализатор:

npm run analyze

Эта команда запустит webpack-bundle-analyzer и вернет такой результат:

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

А анализ будет визуализирован в веб-браузере.

В нашем случае webpack посоветует нам удалить из пакета некоторые неиспользуемые элементы.

4: Оптимизация размера пакета

Теперь нужно повторно посетить файл app.component.ts и изменить его так, чтобы он импортировал firebase из firebase/app, а не из firebase:

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);
  }
}

Сохраните изменения и выполните следующую команду:

npm run build:stats

После этого запустите следующую команду, чтобы визуализировать результат в веб-браузере:

npm run analyze

Размер проекта с 1,36 МБ уменьшится до 563,13 КБ.

Заключение

В этом мануале вы научились использовать webpack для анализа проектов Angular и внесения разумных изменений с целью уменьшения размера пакета.