Использование размера пакета с Travis CI

Milica Mihajlija

Использование bundlesize с Travis CI позволяет определять бюджеты производительности с минимальной настройкой и обеспечивать их соблюдение в рамках рабочего процесса разработки. Travis CI — это сервис, который запускает тесты для вашего приложения в облаке каждый раз, когда вы отправляете код в GitHub. Вы можете настроить свой репозиторий таким образом, чтобы он не позволял объединять запросы на слияние (pull-requests), пока не пройдут тесты bundlesize.

В проверках GitHub, выполняемых Bundlesize, предусмотрено сравнение размера с основной веткой и предупреждение в случае значительного увеличения размера.

Чтобы увидеть это в действии, вот приложение, созданное с помощью webpack , которое позволяет голосовать за вашего любимого котенка .

Установите бюджет производительности

В этом баге уже указан размер пакета.

• Нажмите кнопку «Ремикс», чтобы сделать проект доступным для редактирования.

Основной пакет этого приложения находится в папке public. Чтобы проверить его размер, добавьте следующий раздел в файл package.json :

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Чтобы размер сжатого пакета JavaScript не превышал рекомендуемый предел , установите параметр производительности maxSize равным 170 КБ.

Bundlesize поддерживает шаблоны glob , и символ подстановки * в пути к файлу будет соответствовать всем именам пакетов в папке public.

Создайте тестовый скрипт.

Поскольку Travis требует запуска тестов, добавьте тестовый скрипт в package.json :

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Настройте непрерывную интеграцию

Интеграция GitHub и Travis CI

Сначала создайте новый репозиторий для этого проекта в своей учетной записи GitHub и инициализируйте его, добавив файл README.md .

Вам потребуется зарегистрировать учетную запись на Travis и активировать интеграцию с GitHub Apps в разделе «Настройки» вашего профиля.

После создания учетной записи перейдите в «Настройки» в своем профиле, нажмите кнопку «Синхронизировать учетную запись» и убедитесь, что ваш новый репозиторий отображается в Travis.

Разрешите bundlesize публиковать данные в запросах на слияние.

Для отправки запросов на слияние (pull requests) Bundlesize требуется авторизация, поэтому перейдите по этой ссылке, чтобы получить токен Bundlesize , который будет храниться в конфигурации Travis.

В панели управления Travis вашего проекта перейдите в раздел «Дополнительные параметры» > «Настройки» > «Переменные среды» .

Добавьте новую переменную среды, указав в качестве значения токен и назвав его BUNDLESIZE_GITHUB_TOKEN.

Последнее, что вам нужно для запуска непрерывной интеграции, — это файл .travis.yml , который указывает Travis CI, что делать. Для ускорения процесса он уже включен в проект и указывает, что приложение использует NodeJS.

На этом этапе все готово, и bundlesize предупредит вас, если ваш JavaScript когда-либо превысит допустимый лимит. Даже если все идет отлично с самого начала, со временем, по мере добавления новых функций, килобайты могут накапливаться. Благодаря автоматическому мониторингу бюджета производительности вы можете быть спокойны, зная, что это не останется незамеченным.

Попробуйте!

Запустите свой первый тест размера пакета.

Чтобы оценить производительность приложения в соответствии с заявленными параметрами, добавьте код в репозиторий GitHub, созданный на шаге 3.

1. В Glitch перейдите в меню Инструменты > Git, импорт и экспорт > Экспорт в GitHub .

2. Во всплывающем окне введите ваше имя пользователя GitHub и название репозитория в формате username/repo . Glitch экспортирует ваше приложение в новую ветку с именем "glitch".

3. Создайте новый запрос на слияние, нажав кнопку «Новый запрос на слияние» на главной странице репозитория.

Теперь на странице запроса на слияние вы будете видеть статус выполнения проверок.

Вскоре все проверки будут завершены. К сожалению, приложение для голосования за кошек немного громоздкое и не проходит проверку на соответствие бюджету производительности. Основной пакет составляет 266 КБ, а бюджет — 170 КБ.

Оптимизировать

К счастью, есть несколько простых способов повысить производительность, удалив неиспользуемый код . В src/index.js есть два основных импорта:

import firebase from "firebase";
import * as moment from 'moment';

Приложение использует Firebase Realtime Database для хранения данных, но импортирует весь пакет Firebase, который включает в себя гораздо больше, чем просто базу данных (аутентификация, хранилище, обмен сообщениями и т. д.).

Исправьте это, импортировав в файл src/index.js только тот пакет, который необходим приложению:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Повторный запуск теста

Поскольку исходный файл был обновлен, вам необходимо запустить webpack для сборки нового файла пакета.

1. Нажмите кнопку «Инструменты» .

2. Затем нажмите кнопку «Консоль» . Это откроет консоль в новой вкладке.

3. В консоли введите команду webpack и дождитесь завершения сборки.

4. Экспортируйте код в GitHub через меню Инструменты > Git, импорт и экспорт > Экспорт в GitHub .

5. Перейдите на страницу запроса на слияние (pull request) на GitHub и дождитесь завершения всех проверок.

Успех! Новый размер пакета составляет 125,5 КБ, и все проверки пройдены успешно. 🎉

В отличие от Firebase, импорт частей библиотеки moment не так прост, но попробовать стоит. Узнайте, как дополнительно оптимизировать приложение, в разделе «Удаление неиспользуемого кода» на Codelab .

Монитор

Приложение теперь укладывается в бюджет, и всё в порядке. Travis CI и bundlesize будут продолжать отслеживать бюджет производительности, обеспечивая быструю работу вашего приложения.