Одним из важных свойств любого веб сайта в интернете, является скорость его загрузки. Очевидно, что сайт будет загружаться быстрее, если его размер будет как можно меньше. Это условие обязательно должно соблюдаться и для одностраничных веб-приложений (SPA), особенно если оно должно работать на мобильных устройствах.
Возможно вы сталкивались с такой ситуацией, когда ваша production сборка приложения была подозрительно большого размера и было трудно понять почему получился такой результат.
Что бы разобраться почему так происходит, нам потребуется интересный и полезный инструмент, под названием webpack-bundle-analyzer. Этот плагин для вебпака строит интерактивную детальную карту, на которой отображен размер каждого пакета используемого в приложении. Стоит отметить, что данные для визуализации, генерирует сам вебпак, а плагин всего навсего, запускает вебсервер с интерактивной картой.
Настройка проекта и запуск анализатора
В качестве примера возьмем проект на Angular версии 4.4.6.
Для начала установим webpack-bundle-analyzer командой
npm install --save-dev webpack-bundle-analyzer
Затем в файле package.json, в раздел "scripts" необходимо добавить
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
Далее нам нужно собрать проект с параметром --stats-json, выполнив команду
ng build --prod --aot --stats-json
После успешной сборки проекта, должен появится каталог dist, в котором, должен лежать файл stats.json. Именно этот файл использует webpack-bundle-analyzer для визуализации внутренностей приложения.
Что бы наконец увидеть интерактивную карту, выполним команду
npm run bundle-report
Если все прошло успешно, то у вас должен открыться браузер с адресом http://127.0.0.1:8888, где собственно и будет нарисована карта.
Что нам это дает?
Как видим из скриншота, на карте подробно визуализированно, из чего состоит каждый бандл приложения. В нашем случае, самым жирным скриптом, оказался vendor.[hash].bundle.js
Учитывая особенность фреймворка Angular это нормально, однако, стоит пройтись по исходному коду приложения и проверить как подключаются пакеты, и нужны ли они вообще - это очень важный момент. В интернете достаточно много примеров, в которых не акцентируют внимание на этом, и там можно встретить вот такой способ:
import { Subscription } from 'rxjs';
Если вы используете популярные редакторы или IDE, где настроен линтер, то ваша среда разработки, вам подскажет что такой способ подключения занесен в blacklist.
Из-за этого vendor.[hash].bundle.js может весить несколько мегабайт, потому что таким образом импортируется вся библиотека rxjs. Что бы этого избежать, будет правильным конкретно указывать какой модуль вам нужен, а именно:
import { Subscription } from 'rxjs/Subscription';
Если в вашем проекте есть такие недочеты, то вам стоит провести рефакторинг кода. После этого, вы будете приятно удивлены тому, какой размер получился на выходе. Помимо всего прочего, данный анализатор-визуализатор в левой панели показывает сколько будет весить каждый скрипт при включенном gzip сжатии на сервере, тем самым, напоминая нам, что это важная опция, которую необходимо включить на сервере для ускорения загрузки приложения в целом.