Optimize js bundle

[foxy-eyed]

Задание №6: Оптимизация загрузки js на dev.to

Проблема: большой суммарный размер загружаемых на главной странице скриптов.
Цель: по размеру скриптов уложиться в бюджет в 460000 байт. Соотв., метрикой будет transfer size для всего javascript на странице.

Мониторинг и защита результата

Мониторинг метрики делаем с помощью сервиса sitespeed.io, развернутого в docker'е.
Для метрики задаём бюджет:

{
  "budget": {
    "transferSize": {
      "javascript": 460000
    }
  }
}

Для удобства опции вынесла в json-файл конфигурации, а саму команду в завернула в binstub:

$ bin/speed_test

На старте команда валится со значением метрики 1 036 964

Анализ проблемы

Точки роста ищем с помощью плагина webpack-bundle-analyzer.

Находка №1

Отчёт, построенный до всех оптимизаций, показывает, что самый большой по размеру файл скриптов – vendor.js, а он состоит по большей части из библиотеки moment.js.

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

Решается добавлением плагина webpack.IgnorePlugin с соответствующими правилами в конфигурацию webpack.

Из нового отчёта webpack-bundle-analyzer видно, что moment.js похудел до 147Kb (против 544Kb на старте) :

Проверка sitespeed.io пока не проходит.

Находка №2

Сама по себе библиотека moment.js не используется в коде проекта, она идёт как зависимость библиотеки Chart.js. В свою очередь Chart.js после предыдущей оптимизации вышла в лидеры по размеру внутри файла vendor.js.

Chart.js импортируется в единственный модуль app/javascript/packs/proCharts.js, который, в свою очередь, подключается только на одной странице – дэшборде пользователей со статусом PRO. Т.е. большинству пользователей не нужен. А тем, кому нужен, – не на главной)

Возможное решение – исключить chart.js и moment.js из файла vendor.js, перегруппировав chunks (изменив конфиг webpack.optimize.CommonsChunkPlugin).

На отчёте видно, что Chart.js и moment.js объединились в один чанк с использующим их модулем, и он у нас будет подключаться только в один partial, а размер vendor.js стал ещё меньше:

Результат

Теперь в бюджет укладываемся:

Coverage report в Chrome Devtools показывает, что vendor.jsтеперь содержит только 13% неиспользуемого кода (против 72% на старте):

Ссылка на сравнение отчётов sitespeed.io до и после оптимизации:

https://compare.sitespeed.io/?gist=0aac59baf60a91bf3265d81fbb567a1e

[spajic]

Супер! 👍 👍 👍