Что на самом деле стоит bundle: download, parse, compile, execute

Разработчик выпускает новую фичу в пятницу. На MacBook страница грузится за 800 мс — нормально. К понедельнику bounce rate вырос на 20%. Коллега тестирует на mid-range Android и 8 секунд смотрит в белый экран. Фича была в порядке. Bundle — нет.

Четыре фазы, одна цена

Когда браузер скачивает JavaScript-файл, он не просто «грузит» код. До первого возможного взаимодействия выполняются четыре последовательные фазы.

Download — байты идут по сети. На 4G 200 КБ gzip’d занимает 150-500 мс в зависимости от качества сигнала.

Parse — JS-движок проходит по каждому байту и строит абстрактное синтаксическое дерево (AST). V8 парсит примерно 1-2 МБ/сек на быстром laptop-CPU и лишь 200-400 КБ/сек на среднем Android. Bundle 500 КБ uncompressed занимает 1,5-2 с parse на mid-range mobile.

Compile — движок преобразует AST в байткод, затем в оптимизированный машинный код. V8 использует многоуровневый пайплайн (Ignition → Sparkplug → TurboFan). Стоимость компиляции примерно линейно зависит от количества кода, реально запущенного при старте.

Execute — top-level код bundle’а выполняется синхронно: инициализация фреймворка, создание store, регистрация роутов. Для типового React + Redux приложения это блокирует main thread на 100-500 мс.

Полная цепочка на mid-range mobile для bundle 500 КБ uncompressed: download 800 мс + parse 1,5 с + compile 300 мс + execute 400 мс = примерно 3 секунды до первого возможного клика. Каждая фаза — отдельный рычаг; ни одна не поможет без прямого адресования.

Почему «работает на моём ноутбуке» — ложный тест

MacBook M-series имеет single-thread CPU в 4-8 раз быстрее среднего Android (Snapdragon 6 или 7-серия). 5G или Wi-Fi помогут с download — но parse, compile и execute выполняются целиком на CPU юзера. Более быстрая сеть не двигает эти фазы ни на миллисекунду.

Большинство пользователей в глобальных рынках — на mid-range или старом железе. Команды, тестирующие только на флагманах или dev-машинах, систематически недооценивают реальный опыт юзера. Chrome DevTools имеет режим CPU throttling 4x, приближающий mid-range Android; его использование при каждой performance-проверке ловит разрыв до продакшна.

Дисциплина bundle budget

Bundle budget — максимальное количество байтов (обычно gzip’d JS, CSS, images раздельно), которое route имеет право доставлять, enforce’ится в CI. Без бюджета размер bundle растёт по accretion: каждый инженер добавляет библиотеку, каждая добавляет несколько КБ, ни один PR не виноват, но через полгода bundle удвоился. С бюджетом каждый PR, превышающий cap, fail’ит CI — команда либо оправдывает добавление, либо находит меньшую альтернативу.

Бюджет конвертирует performance из намерения в constraint. Он делает для клиентских байтов то же, что SLO делает для серверной latency: делает её измеримой, enforced и owned.