Размер пакета является одним из наиболее важных и влиятельных факторов для повышения производительности загрузки веб-приложения. Современные сборщики модулей, такие как 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