Перф-регрессии: медленное сползание, которое никто не выкатывал нарочно

Класс отказа: медленное сползание

Краш будит дежурного; рост бандла на 12 кБ не будит никого. Определяющее свойство перф-регрессий — они приходят шагами ниже порога человеческого восприятия: спринт добавляет зависимость здесь, клиентскую границу там, инлайновый prop где-то ещё — каждый дифф защитим, кумулятивная сумма — удвоенный p75. Ревью не ловит этот класс, потому что ни один ревьюер не держит в голове накопленный итог, а фраза «этот PR добавляет 1,8% к бандлу» невидима без инструмента, который печатает ровно это предложение. Типичные скорости бесконтрольного сползания, наблюдаемые по командам: 5–15 кБ minified роста бандла за спринт, и p75 INP, деградирующий из «хорошо» (меньше 200 мс) в территорию «плохо» (больше 500 мс) за два-три квартала без единого атрибутируемого релиза. Защита — не героизм; это машинерия, превращающая невидимые приращения в видимые отказы: бюджеты, валящие сборку; синтетика, диффающая релизы; перцентили, диффающие кольца.

Расползание бандла и рост гидрации

Импорт lodash — канонический механизм сползания: CommonJS-lodash не поддаётся tree-shaking (статическому удалению неиспользуемого кода бандлером), поэтому import { debounce } from 'lodash' грузит всю библиотеку — примерно 70 кБ minified, ~25 кБ gzip, — тогда как lodash/debounce несёт несколько кБ. Класс обобщается: чартовая библиотека ради одного спарклайна, библиотека дат там, где хватило бы Intl, набор полифиллов для браузеров, от которых вы отказались. Контрмера — жёстко падающий байтовый бюджет CI на каждую точку входа роута (size-limit или аналог): сборка падает при пробое бюджета, число — прямо в проверке PR. Бюджеты «только предупреждение» умирают от усталости к алертам за квартал — у каждой команды, гонявшей их, одна история: предупреждения копятся, нормализуются, игнорируются; регрессия всё равно уезжает. Бюджет обязан валить сборку, иначе он декорация.

Рост гидрации — React-специфичный вариант. В RSC-приложении пометка одного компонента 'use client' втягивает в клиентский бандл его и весь его граф импортов — каскад. Таблице из вступления был нужен один hover-тултип; переключение границы привело markdown-рендерер и библиотеку дат, +90 кБ работы гидрации — всё ради отслеживания одного булева. Паттерн лечения — изоляция границы: таблица остаётся на сервере, а из неё выделяется листовой клиентский компонент HoverHint на двадцать строк. Обнаружение — тот же байтовый бюджет, применённый к клиентскому бандлу роута: каскад проявляется как ступенька, которую сборка отказывается принять.

Распад мемоизации: тихая регрессия ререндеров

Мемоизация — контракт над ссылочной идентичностью, и рефакторинги ломают его, не ломая ничего видимого. Когда добавляете prop в мемоизированный компонент, спросите себя: создаётся ли это значение инлайново в каждом рендере? Если да — сравнение всегда провалится. Паттерн распада: мемоизированный список месяцами работает; рефакторинг добавляет style={{ paddingLeft: depth * 8 }} или инлайновый onSelect в месте вызова; каждое сравнение props теперь проваливается; поддерево перерисовывается на каждое нажатие. Ни один тест не падает — вывод идентичен. Ни одна ошибка не летит — перерисовка легальна. Единственные свидетели — Profiler и, со временем, перцентили INP. Дисциплина доказательств — данные Profiler «до/после»: таблица из вступления показывала коммиты по 4 мс с работающим memo и по 41 мс с распавшимся — на каждом нажатии каждого пользователя пять месяцев. Линт не ловит это полностью (он не знает, какие поддеревья дороги), поэтому защита слоёная: Profiler из React DevTools на код-ревью для изменений в горячих путях («покажи профиль коммита для этого рефакторинга») плюс RUM-атрибуция INP, помечающая роут постфактум. Распад memo — ещё и сильнейший аргумент за React Compiler: автомемоизация, переживающая рефакторинги, выводит человека из контракта.

Три слоя обнаружения и дисциплина бисекции

Ни один слой не ловит всё; у каждого есть слепая зона, которую закрывает следующий. CI-бюджеты видят байты до мёржа — мгновенно, на каждый PR, но слепы к рантайм-стоимости: распад memo не добавляет ни байта и проходит. Синтетические проверки (Lighthouse CI или аналог на фиксированном профиле устройства, на PR или ежечасно против продакшена) видят рантайм-стоимость на одном устройстве с фикстурными данными — они ловят ступеньку гидрации, но пропускают то, что проявляется только на реальном масштабе данных (3 000 настоящих строк против 20 в фикстуре) или на реальном дешёвом железе. Перцентили RUM по кольцам релиза видят истину — каждое устройство, каждый датасет, — но отстают на часы и требуют трафика; это слой, ловящий то, что упустили оба гейта, и доказывающий, что те откалиброваны. Когда RUM помечает регрессию, проскочившую гейты, бисекция — это два диффа: дифф релиза (какие коммиты уехали в регрессировавшем кольце — список короток, если деплоите ежедневно, что само по себе аргумент за частоту деплоев) и дифф профиля (синтетическая трасса или семплированный полевой профиль регрессировавшего роута до и после, называющий компонент или задачу, которая замедлилась). С кольцами релизов и ежедневными деплоями множество подозреваемых обычно меньше дюжины коммитов; без них — трёхнедельная охота.

Контракт бюджета: числа и владелец

Работающий перф-бюджет — это контракт на роут из трёх чисел и имени: байты JS (например, 200 кБ minified на точку входа), цель LCP (2,5 с на p75), цель INP (200 мс на p75) — и команда-владелец. Пункт о владельце и делает это контрактом, а не дашбордом: при пробое роута тикет получает команда-владелец, а не центральная «перф-команда», владеющая всем и потому ничем. Две операционные нормы держат его честным. Храповик: когда роут уверенно бьёт свой бюджет, бюджет затягивается, фиксируя выигрыш, — иначе запас тихо проедается. Протокол исключений: повышение бюджета требует записанной подписи в конфиге, так что у каждого увеличения есть имя, дата и причина. Команды, живущие по этой схеме, описывают один и тот же исход: сползание перестаёт быть квартальной археологией и становится пятиминутным разговором на PR, пока контекст свеж.