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

Milica Mihajlija

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

Проверки Bundlesize на GitHub включают сравнение размера с основной веткой и предупреждение в случае большого скачка размера.

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

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

Этот глюк уже содержит размер пакета.

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

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

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

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

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

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

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

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

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

Интегрируйте GitHub и Travis CI

Сначала создайте новый репозиторий для этого проекта в своей учетной записи GitHub и инициализируйте его с помощью README.md .

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

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

Разрешить размер пакета для публикации запросов на включение

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 для хранения данных, но оно импортирует весь пакет Firebase, который состоит из гораздо большего, чем просто база данных (аутентификация, хранилище, обмен сообщениями и т. д.).

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

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

Повторный тест

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

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

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

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

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

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

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

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

Монитор

Сейчас приложение находится в рамках бюджета, и все в порядке. Travis CI и Bundlesize будут продолжать отслеживать бюджет производительности, гарантируя, что ваше приложение будет работать быстро.