Как анализировать размеры пакетов Angular

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

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

Однако в более крупных приложениях встряска дерева может неправильно обработать некоторые ненужные импорты, что приведет к обратному результату – увеличению размера пакета. А при отложенной загрузке определенные модули могут загружаться неправильно, тем самым увеличивая размер основного пакета.

В этом мануале вы познакомитесь с двумя инструментами для анализа размера пакета вашего приложения: webpack-bundle-analyzer и source-map-explorer.

Требования

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

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

Этот мануал был проверен на версиях Node v16.2.0, npm v7.18.1, @angular/cli v12.0.5, @angular/core v12.0.5, webpack-bundle-analyzer v4.4.2 и source-map-explorer v2.5.2.

Как работает webpack-bundle-analyzer

webpack-bundle-analyzer – это инструмент для анализа JSON-файла статистики веб-пакетов, который Angular CLI может автоматически генерировать при создании приложения.

Для начала установим webpack-bundle-analyzer в свой проект в качестве зависимости разработки:

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

Затем давайте соберем свое приложение для производства с помощью Angular CLI. В команде сборки укажите –stats-json, чтобы статистика веб-пакета экспортировалась в папку dist:

ng build --configuration=production --stats-json

Теперь запустите локальный webpack-bundle-analyzer для файла stats.json через npx:

npx webpack-bundle-analyzer dist/*/stats.json

Это запустит локальный сервер по порту 8888 с интерактивной картой FoamTree для вашего пакета приложений в производстве.

Вы можете взаимодействовать с визуализацией данных на вашем экране и выбирать, какие пакеты нужно отобразить (например, основные пакеты, вендоры, блоки).

При желании в файле package.json вы можете создать новый скрипт npm, который будет вызвать webpack-bundle-analyzer:

"scripts": {
  "stats": "webpack-bundle-analyzer dist/*/stats.json",
},

Читайте также: Использование скриптов npm в разработке

Если вы захотите получить доступ к статистике сборки в производстве, вы можете использовать следующую команду:

npm run stats

Эта команда запустит webpack-bundle-analyzer dist/*/stats.json.

Примечание: Скрипты npm сначала просматривают локальную папку node_modules, поэтому здесь нет необходимости использовать npx.

Как работает source-map-explorer

source-map-explorer – это инструмент, который использует сгенерированные пакетом sourcemap файлы для анализа размера и состава пакета, а также для визуализации.

Для начала мы установим пакет в свой проект как зависимость разработки:

npm install source-map-explorer@2.5.2 --save-dev

Затем мы соберем наше приложение для среды производства с флагом флаг –source-map, чтобы создать для каждого пакета JavaScript sourcemap файлы:

ng build --configuration=production --source-map

После этого вы можете сгенерировать визуализацию, задав один из файлов JavaScript из вашего пакета. Например, если бы мы хотели взглянуть на основной пакет, команда выглядела бы примерно так:

npx source-map-explorer dist/*/main.*.js

Заключение

В этом руководстве вы познакомились с двумя инструментами для анализа размера пакета вашего приложения: webpack-bundle-analyzer и source-map-explorer.

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

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