Week 6 - Alexander Belozerov

[sashabelozerov]

1- Сначала настроим sitespeed.io и выполним анализ исходной версии приложения с помощью webpack-bundle-analyzer:

docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io http://host.docker.internal:3000/ -n 1 --budget.configPath budget.json

bin/webpack --profile --json > tmp/stats.json
npx webpack-bundle-analyzer tmp/stats.json public/packs

Видим, что бюджет не соблюдается, а moment.js и chart.js могут быть точками роста.

2- Закомментируем всё содержимое файла proCharts.js и выполним анализ изменённой версии в webpack-bundle-analyzer:

moment.js и chart.js пропали. Значит, дело в том, что proCharts.js попадает в сборку vendor.js.

3- Найдем, где еще используеся proCharts.js:

grep -r 'proCharts' app
app/views/dashboards/pro.html.erb:    <%= javascript_pack_tag "proCharts", defer: true %>

Здесь он подключается в виде пака. А moment.js и chart.js в общем vendor не нужны.

4- Разбираемся с плагином CommonsChunkVendor, исключаем эти файлы. Выполним анализ изменённой версии в webpack-bundle-analyzer:

Проверяем бюджет с помощью sitespeed.io:

Не уложились на 5 Кб ) Но я посчитал, что этого достаточно.

5- Настраиваем GitHub Actions для защиты от деградации:

[spajic]

Да, всё правильно, действия достаточные. Может быть при обновлении js-либ что-то раздулось и перестало пролезать в бюджет, но дальнейших оптимизаций не предполагалось ✅