Skip to content

Latest commit

 

History

History
163 lines (114 loc) · 9.88 KB

README.ru.md

File metadata and controls

163 lines (114 loc) · 9.88 KB
Raw

⛔ РЕПОЗИТОРИЙ НЕ ПОДДЕРЖИВАЕТСЯ

Разработка будет продолжена в репозитории https://github.com/343dev/harold.

@funboxteam/harold

Аватар: грустный эмоджи в маске с улыбкой

npm

Harold — CLI-утилита для сравнения размеров сборок фронтенд-проекта.

Мотивация

Размер бандла среднестатистического фронтенд-проекта растёт с каждым изменением.

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

Демо

Демо GIF

Демо ускорено в несколько десятков раз. В реальной жизни установка зависимостей и сборка проекта занимают примерно вечность.

Установка

npm install -g @funboxteam/harold

Команды

snapshot [options]

Собирает проект, и создаёт слепок сборки.

Доступные флаги:

  • -o, --output <path> — указывает путь, по которому нужно сохранить слепок; по умолчанию harold_snapshot_<date>_<time>.json;
  • -e, --exec <cmd> — указывает команду для сборки проекта; по умолчанию npm run build-production. Команда будет запущена с установленной переменной окружения NO_HASH=true;
  • -p, --path <path> — указывает путь до результирующей директории сборки, слепок которой будет сделан; по умолчанию public.

diff <left> <right>

Сравнивает указанные слепки.

help

Выводит справку по командам.

FAQ

Как оно работает?

При вызове harold snapshot Гарольд запускает сборку проекта, ждёт пока она закончится, после этого идёт в папку с файлами бандла и записывает размер каждого из них. По пути он ещё и создаёт gzip-версию каждого файла, и записывает и его размер. После этого собирает всё это в кучу и сохраняет в JSON-файл.

При вызове harold diff first.json second.json он сравнивает переданные JSON-файлы и выводит общую статистику.

Пример использования 
# Переходим в директорию проекта
$ cd ~/my-syper-kewl-project/

# Делаем слепок
$ harold snapshot -o before.json

# Как-то изменяем проект

# Делаем ещё слепок
$ harold snapshot -o after.json

# Сравниваем слепки
$ harold diff before.json after.json

Snapshots:
 Left: 11/10/2020 6:30:56 PM • my-syper-kewl-project • master
 Right: 11/10/2020 6:45:13 PM • my-syper-kewl-project • improvement/framework-update

Build time:
 16 seconds slower (Left: 129 seconds, Right: 145 seconds)

Diff by category:
 ————————————————————————————————————————————————————————————————————————————————————
                before              after               Changes
 ————————————————————————————————————————————————————————————————————————————————————
  JS            1.04 MB (270 kB)    1.12 MB (294 kB)    +78.2 kB (+23.7 kB), +1 item
 ————————————————————————————————————————————————————————————————————————————————————
  JS (legacy)   1.07 MB (285 kB)    1.16 MB (314 kB)    +90.6 kB (+28.6 kB), +1 item
 ————————————————————————————————————————————————————————————————————————————————————
  CSS           144 kB (23.4 kB)    144 kB (23.4 kB)    No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Images        5.26 MB (5.23 MB)   5.26 MB (5.23 MB)   No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Fonts         159 kB (159 kB)     159 kB (159 kB)     No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Videos        1.59 MB (1.58 MB)   1.59 MB (1.58 MB)   No changes
 ————————————————————————————————————————————————————————————————————————————————————
  Other         127 kB (13.2 kB)    127 kB (13.3 kB)    +364 B (+82 B)
 ————————————————————————————————————————————————————————————————————————————————————

  Total         9.4 MB (7.56 MB)    9.57 MB (7.61 MB)   +169 kB (+52.4 kB), +2 items
 ————————————————————————————————————————————————————————————————————————————————————

Diff by files:
 m public: +169 kB (+52.4 kB)
 m public/10.js: +16 B (+4 B)
 m public/11.js: -20 B (-3 B)
 + public/12.js: 301 B (143 B)
 m public/3.js: +1.84 kB (+621 B)
 m public/app.js: +4.18 kB (+843 B)
 m public/legacy.10.js: +42 B (+18 B)
 + public/legacy.12.js: 513 B (148 B)
 m public/legacy.3.js: +1.9 kB (+634 B)
 m public/legacy.app.js: +6.83 kB (+1 kB)
 m public/legacy.vendor.js: +81.3 kB (+26.8 kB)
 m public/legacy.vendor.js.LICENSE: +182 B (+41 B)
 m public/vendor.js: +72.2 kB (+22.1 kB)
 m public/vendor.js.LICENSE: +182 B (+41 B)

Что за NO_HASH?

Современные бандлеры умеют добавлять в имена файлов хэши, чтобы улучшать их кэширование. Однако, Гарольд сравнивает файлы основываясь на их имени. Чтобы улучшить качество пофайлового сравнения, стоит настроить бандлер таким образом, чтобы он отключал добавление хэшей, если указана переменная окружения NO_HASH.

Или же вы можете просто указать иную переменную, например:

WITHOUT_CONTENTHASH=true harold snapshot

Как снять слепок без сборки проекта?

Передайте в --exec какую-нибудь бесполезную команду, вроде echo 1.

Что такое «JS (legacy)»?

Зачастую фронтендер-разработчикам нужно поддерживать несколько разных браузеров, и некоторые из них могут быть «слишком старыми» по современным меркам. А потому, чтобы облегчить скачивание ассетов для пользователей современных браузеров, разработчики разбивают бандл на две части: современную и «легаси». В последней тот же код, что и в первой, но с дополнительными полифиллами, более древним синтаксисом JS и пр.

Если в проекте есть подобное разбиение, Гарольд ожидает, что файлы «легаси-бандла» будут названы legacy.*.js. Если таковые найдутся в проекте, то их статистика появится в строке «JS (legacy)».

Благодарности

Аватар для репозитория нарисовал Игорь Гарибальди.

Sponsored by FunBox