Длительное время загрузки начальной страницы? Стоит это прочитать!
Ваше веб-приложение когда-нибудь жаловалось на то, что оно слишком долго загружается? Вам когда-нибудь давали задание "оптимизировать производительность" медленного приложения? Существует множество тем об улучшении производительности вашего приложения, таких как ленивая загрузка, обнаружение изменений, рендеринг на стороне сервера и т.д. Одна из тем, о которой я хочу поговорить здесь, это оптимизация размера бандла Angular. Это чрезвычайно просто и полезно.
Трудно отрицать, что время загрузки начальной страницы тесно связано с размером бандла вашего Angular приложения.
Запустив сборку ng --prod
, вы увидите размер пакетов файлов, которые браузер будет получать с вашего сервера.
Обычно среди всех файлов на изображении выше, только main.*.js
скорее всего станет большим или безумным. Я проверил многие приложения, построенные с помощью Angular, и у меня есть ощущение, что большинство приложений средних размеров должны иметь main.*.js
меньше 500 КБ, в среднем 250 КБ. Если размер вашего файла в значительной степени превышает эти цифры, то вы должны быть в курсе. Если размер вашего файла ниже этого числа, все равно можно продолжать его оптимизировать.
Вообще говоря, размер 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
Если размер пакета становится слишком большим, возможно, вы захотите проанализировать пакет потому, что возможно вы использовали неподходящий большой сторонний пакет, или забыли удалить какой-то пакет, если вы его больше не используете. Webpack имеет удивительную функцию, чтобы дать нам визуальное представление о составе веб-пакета.
Как получить этот граф?
npm install -g webpack-bundle-analyzer
ng build --stats-json(не используйте флаг
--prod). Включив
--stats-json, вы получите дополнительный файл
stats.json
webpack-bundle-analyzer path/to/your/stats.jsonи браузер откроет страницу на localhost:8888
Какие выводы можно сделать из анализа?
В Angular 7 и более поздних версиях, когда генерируете новое приложение с помощью ng new
, в файле angular.json
можно найти такую же конфигурацию:
"budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ]
Это выдаст предупреждение, если размер бандла превысит 2MB, и выдаст ошибку, если размер пакета превысит 5MB. Можно настроить числа в соответствии с вашими потребностями.
Можно использовать эту возможность в вашем конвейере CI/CD. Если вы видите предупреждение/ошибку, возможно, вы захотите расследовать, что происходит.
Если размер пакета становится слишком большим из-за того, что приложение такое же большое, как Facebook, то нужно использовать ленивые загрузки. Эта тема широко освещается в сообществе Angular, поэтому я не буду упоминать ее здесь.