Аудит перформансу: як зменшити бандл на 25% за 10 хвилин

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Коли до релізу залишається небагато часу, я завжди проводжу аудит продуктивності. Це допомагає швидко знайти та оптимізувати «вузькі місця». Цього разу такий аудит дозволив за 10 хвилин виявити проблему, виправлення якої зменшило розмір бандла на 25%.
Розмір фінального JS-бандла напряму впливає на швидкість завантаження сайту та метрики TTI (Time to Interactive) і TBT (Total Blocking Time). Хоча сучасні збирачі (Vite, Webpack) багато роблять автоматично, деякі проблеми виникають через прості помилки в коді. Моя історія — саме про такий випадок.

Контекст проєкту
Для розуміння, наш проєкт — це монорепозиторій на pnpm зі стандартною структурою apps та packages.
Основний стек: Vite, React, Tailwind CSS, Redux Toolkit, TanStack Router.
Ключовим є пакет packages/ui, де знаходяться спільні компоненти.

Аналіз та рішення
Крок 1: Встановлення візуалізатора
Я встановив rollup-plugin-visualizer і додав його в vite.config.js. Цей плагін генерує HTML-файл, де наочно показано, з чого складається ваш бандл.

```ts
// vite.config.js
import { visualizer } from "rollup-plugin-visualizer";
export default {
plugins: [
visualizer({ open: true, filename: "stats.html" }),
],
};

Крок 2: Пошук проблеми
Після запуску production-збірки я відкрив stats.html і побачив, що 60% всього бандла займає наш спільний ui модуль. Це одразу вказало, де шукати проблему.

Крок 3: Виявлення причини та виправлення
Я провів такий самий аналіз для самого ui пакета і миттєво все зрозумів. Виявилося, що величезна ілюстрація була імпортована безпосередньо в одному з компонентів. Через це Vite перетворив її на рядок Base64 і вбудував прямо в JavaScript. Ця одна картинка займала чверть усього додатка!

Рішення було простим:
Перемістив зображення до публічної директорії public/. Замінив прямий імпорт у компоненті на звичайний шлях до файлу. Це дозволило винести зображення з JS-бандла, і тепер браузер завантажує його як окремий, правильно кешований асет.

Висновки
Подібні помилки трапляються через людський фактор, і саме для їх виявлення потрібні регулярні аудити.