vue-why-render добрался до версии 0.8: появился граф зависимостей реактивности, часть логики переехала в Rust/WASM, а данные теперь можно смотреть прямо в VS Code.
Изначально инструмент решал одну задачу — объяснять, из-за чего компонент Vue 3 перерисовался. Подключение занимало пару строк через scan(app, { panel: true }), а на каждом обновлённом компоненте показывались имя, число рендеров, длительность и конкретная причина вроде «prop badge: {text} → {text} — new reference, same value». Для Pinia выводилось что-то в духе store cart.items: Array(1) → Array(0) · action clear(), для роутера — route.params.id: «1» → «2». Прилагались панель на пять вкладок, бюджеты рендеров, тесты вида expectRenders(Card).toBe(0) и отчёты в JSON/Markdown.
Главное пополнение — вкладка Deps, живая карта связей «компонент ↔ реактивный источник». Чтобы её построить, автор всё же задействовал renderTracked, от которого раньше отказывался из-за нагрузки: данные собираются лениво, только пока открыта вкладка, и сразу дедуплицируются. Работают два ракурса — Components (какие ref, prop, store и computed читает компонент) и Sources (какие компоненты завязаны на конкретный ref). У каждого ребра видны счётчики чтений и триггеров: если UserAvatar 47 раз прочитал user.name, а перерисовался дважды — чтения безобидны, а вот CartBadge, дёргающийся от cart.items на каждый keystroke, уже повод разбираться.
Построение дерева компонентов, дедупликацию причин и дифф двух отчётов переписали на Rust и собрали в WebAssembly — на сотнях и тысячах компонентов именно эти операции проседали. WASM-модуль грузится лениво отдельным чанком, так что бандл приложения не раздувается; если WASM недоступен (SSR, jsdom, строгий CSP), автоматически включается JS-фолбэк без какой-либо настройки.
Третья новинка — расширение для VS Code с WebSocket-мостом: сканер в браузере стримит данные в редактор. В сайдбаре появляются деревья компонентов (с сортировкой по рендерам и 🔥 у горячих) и зависимостей, над в .vue-файлах выводится CodeLens с числом рендеров и средней длительностью, в статус-баре крутится живой счётчик, а из палитры доступны pause, resume и reset.
Помимо собственной панели, инструмент регистрируется в Vue DevTools — со вторым инспектором дерева реактивных источников (цветные теги ref, prop, store, computed) и отдельным слоем таймлайна, где каждый триггер пишется событием. Для Nuxt хватает одной строки modules: [‘vue-why-render/nuxt’], модуль уже есть в каталоге nuxt.com/modules. За месяц пакет набрал 668 загрузок на npm; зависимостей нет, лицензия MIT, требуется Vue 3.3+.
Загрузка...
