The task 6.

[pochkuntaras]

Проблема

На всех страницах dev.to загружается файл vendor.js.

Анализ показывает, что этот файл содержит библиотеку moment.js, с большим размером.

Подготовка

Дано бюджет:

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

sitespeed.io показал, что бюджет не соблюдается:

INFO: Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 1.1 MB max limit 449.2 KB
INFO: Budget: 0 working, 1 failing tests and 0 errors

Оптимизация

• Подключил webpack-bundle-analyzer для детализации объемов JavaScript и выяснил, что больше всего потребляют moment.js и Chart.js.
• Отключил локали от moment.js, но размер библиотеки продолжил выходить за бюждет.
• Решено исключить библиотеки moment.js и Chart.js из загрузки в vendor.js. Ситуация заничительно улучшилась, но vendor.js продолжал не входить в бюджет на ~6 KB.
• Решено исключить библиотеку marked из загрузки в vendor.js, тест на бюджет прошел успешно:

INFO: Budget: 1 working, 0 failing tests and 0 errors

Настройка CI

Для защиты от регрессии я использовал ngrok и GitHub Actions:

• Зарегистрировался на ngrok.com.
• Установил ngrok, добавил токен.
• Пробросил приложение.
• Создал конфиг Actions.
• Запушил код.

GitHub Actions

[spajic]

✅

[spajic]

лайк за github-ci, ngrok, fresh sitespeed.io

[spajic]

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

(spoiler: насчёт marked не знаю, а в остальном не сломается - но надо понимать почему)