Оптимизация размера Angular bundle за 4 шага

Angular

Вам доводилось получать жалобы на слишком медленную загрузку веб-приложения или получать задачу “оптимизировать производительность” медленного приложения? Множество тем посвящено производительности приложений: отложенная загрузка, отслеживание изменений, рендеринг со стороны сервера и т.д. Здесь я расскажу об оптимизации размера Angular bundle. Все предельно просто и полезно.

Шаг 1: узнайте размер bundle

Трудно отрицать, что начальное время загрузки страницы тесно связано с размером Angular bundle вашего приложения.

Запустив ng build --prod,вы увидите размеры bundle, которые браузер получит от вашего сервера.

Какой размер считать хорошим и какой плохим?

Из 4 файлов на картинке выше только main.*.js , скорее всего, будет большим или даже огромным. Я проверил множество приложений, собранных с помощью Angular, и, полагаю, main.*.js среднего корпоративного приложения должен быть менее 500 КБ, даже около 250 КБ. Если bundle изрядно больше, стоит обратить на это внимание. И даже если меньше , то его всегда можно оптимизировать.

Шаг 2: ваши файлы сжаты?

Размер сжатого файла составляет примерно 20% от размера исходного файла, что может существенно уменьшить начальное время загрузки вашего приложения.

Чтобы проверить, сжаты ли файлы, просто откройте вкладку Network в консоли разработчика. Если вы увидите в “Response Headers” “Content-Encoding: gzip”, все в порядке.

Если вы не видите этот заголовок, браузер загрузит исходные файлы. Например, для Angular bundle на картинке ниже браузер загрузит main.0d17aff85f337483317e.js — 2,21 МБ. Однако, если сжать файл, браузер загрузит только 495,13 КБ. Такое сильное уменьшение размера безусловно снизит начальное время загрузки страницы, особенно если у пользователя низкая скорость интернета.

Как сжать?

Если вы разместили приложение на облачной платформе или на CDN, можете не беспокоиться — эту проблему они наверняка решили за вас. Однако, если у вас собственный сервер (например, NodeJS + expressJS), обслуживающий приложение, обязательно проверьте сжатие файлов.

Ниже пример сжатия статических активов в NodeJS + expressJS приложении. Трудно представить, но это простейшее промежуточное сжатие может уменьшить размер пакета с 2,21 МБ до 495,13 КБ.

const compression = require('compression')const express = require('express')const app = express()app.use(compression())

Gzip не единственное решение, Brotili тоже подойдет.

Шаг 3: проанализируйте Angular bundle

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

Получить этот график очень просто:

  1. npm install -g webpack-bundle-analyzer.
  2. В приложении Angular запуститеng build --stats-json (не используйте флажок--prod). Применив --stats-json , вы получите дополнительный файлstats.json.

3. Наконец, запустите webpack-bundle-analyzer path/to/your/stats.json и браузер выдаст страницу наlocalhost:8888. Развлекайтесь.

Вас может удивить,

а) что вы забыли удалить некоторые неиспользуемые пакеты; 

б) некоторые пакеты значительно больше, чем вы ожидали, и их можно заменить на другие; 

в) вы ошибочно импортировали некоторые библиотеки (например, 80% от moment.js— просто локальные данные, которые наверняка не нужны), так что у вас есть несколько направлений для поиска ответа.

Шаг 4: следите за размером пакета

В Angular 7 и выше, когда вы создаёте новое приложение ng new, в angular.json вы можете найти такую конфигурацию:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

Появляется предупреждение, если размер bundle превышает 2 МБ, и ошибка, если размер превышает 5 МБ. Вы можете настроить числа под свои нужды.

Можно использовать эту функцию в CI/CD-цепочке. Увидите предупреждение/ошибку — сможете выяснить, что пошло не так.

Другие способы уменьшить размер bundle

Если размер вашего bundle становится слишком большим — например, ваше приложение настолько же огромно, как Facebook — вам действительно стоит использовать ленивую загрузку. 

Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming