Оптимизация размера углового пакета

Обзор

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

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

Насколько велик ваш текущий комплект?

Запустив ng build --prod, вы можете узнать свой текущий размер пакета. Позвольте мне создать один из проектов Angular с более чем 100 модулями. (Поверьте, я не считал модули маршрутизации).

Сборка включает 142 фрагмента, а файлы значительно большего размера представлены ниже.

main. *. js: 3,3 МБ
polyfills. *. js: 1,5 МБ
стили. *. js: 1,5 МБ
скрипты. *. js: 1,1 МБ
runtime. *. js (в некоторых проектах в зависимости от того, как вы структурируете свои модули)

Обычно среди таких больших файлов main. *. Js, скорее всего, станет большим и сумасшедшим. Вы можете потратить недели и месяцы на несколько итераций процесса изменения кода и реструктуризации, но это будет очень болезненно. Но трудно отрицать, что время начальной загрузки страницы тесно связано с размером пакета приложений Angular.

Анализатор пакетов

webpack-bundle-analyzer может создавать интерактивную визуализацию древовидной карты содержимого всех ваших пакетов.

Просто выполните следующие шаги, чтобы создать визуализацию для вашего пакета.

npm install -g webpack-bundle-analyzer
В приложении Angular запустите ng build --stats-json. Это создаст дополнительную находку stats.json в вашей папке ./dist.
Наконец, запустите webpack-bundle-analyzer ./dist/stats.json, и в вашем браузере откроется страница localhost:8888.

gzipper

gzipper - это пакет NPM, который предоставляет интерфейс командной строки для сжатия файлов с использованием популярных алгоритмов сжатия, таких как Brotli и Gzip. Также этот модуль отлично работает со многими инструментами интерфейса командной строки (Angular CLI, Vue CLI, create-react-app) и поддерживает несколько флагов опций для каждого алгоритма.

Установите застежку-молнию в качестве зависимости от разработчика для вашего проекта.

npm i -D gzipper

или это можно установить глобально.

npm i -g gzipper

2. Создайте свой проект с флагами --prod, --aot и --build-optimizer. Если вы не знакомы с --build-optimizer, он позволяет использовать оптимизацию @ angular-devkit / build-optimizer при использовании параметра «aot».

ng build --prod --aot --build-optimizer

Теперь у вас будет ./dist с App Bundle.

3. Чтобы сжать App Bundle, выполните команду ниже.

gzipper --verbose ./dist

Когда вы сейчас проверите папку ./dist, вы увидите, что новый файл gziped создается для каждого файла в папке ./dist. Далее размер сжатой версии файла чрезвычайно меньше. Как показано на скриншоте ниже, размер файла main. *. Js уменьшился на 78% в файле main. *. Js.gz.

main. *. js.gz: 735 КБ
polyfills. *. js.gz: 446 КБ
стили. *. js.gz: 322 КБ
скрипты. *. js.gz: 288 КБ

gzipper можно ограничить определенными расширениями файлов с помощью флага --include.

gzipper --verbose --include js,html,scss,css,svg,json ./dist

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

"scripts": {
   "build:prod": "ng build --prod --aot --build-optimizer && gzipper --verbose ./dist"
},

Используйте следующую команду для сборки для производства.

npm run build:prod

Развертывание на NGINX

Теперь у вас есть сотни исходных файлов App Bundle и сжатых файлов в формате gzip в одной ./dist папке.

Чтобы развернуть пакет приложений на NGINX, вам нужно внести небольшие изменения в ваш файл existingnginx.conf. Для этого вам понадобится модуль HttpGzipStatic. Поместите gzip_static on; в свой конфиг.

Вам нужно будет сохранить как заархивированный, так и исходный файл, затем вы можете запросить, например, /css.css и получить заархивированный /css.css.gz

server {
  listen 80;
  charset utf-8;
  sendfile on;
  root /usr/share/nginx/html;
  gzip_static on;
  location ~*  \.(jpg|jpeg|png|gif|ico|css|js|pdf)$ {
    expires 7d;
  }
   
  location / {
    expires 12h;
    try_files $uri $uri/ /index.html = 404;
  }
}

Вы можете изменить location, expires конфигурации по своему усмотрению.

Если вы предпочитаете развертывание Docker, Dockerfile будет выглядеть так, как показано ниже.

FROM nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html
COPY dist/ /usr/share/nginx/html

Если все настройки были выполнены успешно, заголовок ответа content-encoding: gzip можно просмотреть для сжатых файлов в инструментах разработчика браузера.

Оптимизация изображения

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

Установите imageoptim-cli.

npm install -g imageoptim-cli
- or -
brew update
brew install imageoptim-cli

2. Добавьте сценарий в package.json для вызова imageoptim. Измените команду, чтобы она соответствовала вашим папкам с изображениями.

"scripts": {
  "imageoptim": "imageoptim --imagealpha 'src/assets/**/*.png'"
 },

3. Установите приложения ImageOptim и ImageAlpha на свой ноутбук.

ImageOptim: https://imageoptim.com
ImageAlpha: https://pngmini.com

4. Запустите сценарий npm, чтобы оптимизировать все файлы изображений.

npm run imageoptim

ImageOptim будет брать изображения партиями и оптимизировать их. Этот процесс займет немного времени в зависимости от количества и размера изображений.

Пожалуйста, посетите документацию ImageOptim для получения более подробной информации.

Надеюсь, вам понравилась статья и вы узнали что-то новое. Оставайтесь подписывайтесь на мою следующую статью.

Оптимизация размера углового пакета