Длительное время загрузки начальной страницы? Стоит это прочитать!

Ваше веб-приложение когда-нибудь жаловалось на то, что оно слишком долго загружается? Вам когда-нибудь давали задание "оптимизировать производительность" медленного приложения? Существует множество тем об улучшении производительности вашего приложения, таких как ленивая загрузка, обнаружение изменений, рендеринг на стороне сервера и т.д. Одна из тем, о которой я хочу поговорить здесь, это оптимизация размера бандла Angular. Это чрезвычайно просто и полезно.

Шаг 1. Узнайте размер бандла

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

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

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

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

Шаг 2. Ваши файлы сжаты?

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

Чтобы проверить, сжаты ваши файлы или нет, просто откройте сетевую вкладку консоли разработчика. Если видите в "Response Headers" Content-Encoding: gzip, можете переходить к следующему шагу.

Если вы не видите этого заголовка, браузер загрузит оригинальные файлы. Например, браузер загрузит main.js и данные весом 2.21MB. Однако, если сожмете файл, браузер загрузит только 495.13КБ. Такое огромное уменьшение размера файла, очевидно, уменьшит время загрузки начальной страницы, особенно когда у пользователя низкая скорость интернета.

Как сжать?

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

Ниже приведен пример сжатия статических файлов в приложении NodeJS + ExpressJS. С трудом можно себе представить, что простое "сжатие" размер вашего файла с 2.21MB до 495.13KB.

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

Gzip - не единственный способ сжатия, можно также использовать Brotli

Шаг 3: Анализируйте Angular бандл

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

Как получить этот граф?

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

Какие выводы можно сделать из анализа?

1. забыли удалить некоторые пакеты, которые больше не используете
2. некоторые пакеты намного больше, чем ожидалось, и могут быть заменены на другие
3. неправильно импортированы некоторые библиотеки (например, 80% moment.js - это просто локальные данные, которые, вероятно, не нужны), так что у вас есть некоторое направление для поиска ответа.

Шаг 4. Мониторинг размера бандла

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

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

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

Можно использовать эту возможность в вашем конвейере CI/CD. Если вы видите предупреждение/ошибку, возможно, вы захотите расследовать, что происходит.

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

Если размер пакета становится слишком большим из-за того, что приложение такое же большое, как Facebook, то нужно использовать ленивые загрузки. Эта тема широко освещается в сообществе Angular, поэтому я не буду упоминать ее здесь.