Preact vs React: сравнение производительности
Preact — это легковесная альтернатива React, обладающая всеми его возможностями, но при этом занимающая всего 3 КБ! Для сравнения, React + ReactDOM весят около 41 КБ (gzip).
🔥Преимущества Preact:
🔸Облегченный виртуальный DOM
🔸Оптимизация производительности по умолчанию
🔸Простая интеграция
🔸PWA по умолчанию
📎Сравнение производительности React и Preact
1.Дашборд на React:
🔸Использовала Create React App
🔸Разделила код на уровне маршрутов
🔸Результат в GTMetrix: 80% (оценка B)
🔸LCP (загрузка основного контента): ~1 сек
🔸Время полной загрузки: ~2 сек
2.Дашборд на Preact
🔸Использовала preact-cli
🔸Результат в GTMetrix: 100% (оценка A)
🔸LCP: <500 мс
🔸Полная загрузка: ~1,3 сек
🔸TTFB (время до первого байта): 179 мс
❗️ Ограничения Preact
* Приостановленная (`Suspense`) и отложенная загрузка (`Lazy`) пока экспериментальны
* Некоторые API React могут требовать адаптации (`preact/compat`)
- Размер: React ~41 КБ vs Preact 3 КБ
- LCP: React ~1 сек vs Preact <500 мс
- Время полной загрузки: React ~2 сек vs Preact 1,3 сек
- Оценка GTMetrix: React B (80%) vs Preact A (100%)
- Preact выигрывает по производительности: меньше размер, быстрее загрузка
- Отлично подходит для легковесных и PWA-приложений
- Но есть нюансы с совместимостью React API
📎 Ссылка
🎙 Новости
📝 База вопросов