Preact предлагает оптимизацию производительности по умолчанию.
Несколько месяцев назад я написал статью, основанную на оптимизации времени загрузки React, и большинство комментариев читателей предлагали попробовать Preact, чтобы получить оптимизацию по умолчанию. Поэтому я решил попробовать Preact с тем же приложением, что и в предыдущей статье. Давайте сначала познакомимся с Preact.
Preact — это альтернативная библиотека React со всеми функциями React! Preact — это библиотека размером 3 КБ. Это очень мало по сравнению с React, так как размер gzip React и react-dom составляет около 41 КБ, не считая реактивных скриптов, основанных на фобии пакетов. Некоторые выделенные функции Preact:
- Легкий виртуальный DOM
- Маленький размер
- Производительность оптимизирована по умолчанию
- Интеграция проста
- ПВА по умолчанию
Теперь давайте посмотрим на Preact в действии.
Я разработал одно и то же приложение в React и Preact, чтобы проверить производительность приложения.
Для приложения React я использовал Создать приложение React, а для Preact я использовал preact-cliPreact также дает возможность преобразовать существующее приложение React в Preact с помощью preact-compat, но я создал приложение с нуля, чтобы увидеть лучшие результаты.
Чтобы сравнить производительность обоих приложений, я использовал GTmetrix и разместил оба приложения на Netlify.
Производительность приложения React
Ниже приведена оценка, выставленная GTMetrics для приложения на основе React. Я использовал Разделение кода на основе маршрута для компонента панели мониторинга. Производительность составляет 80 % с оценкой B, максимальным отрисовкой содержимого (LCP) и смещением макета (CLS). низкий.
Как мы видим на изображении ниже, вся страница загружается за 2 секунды, первая отрисовка содержимого занимает около 1 секунды. Кажется, производительность неплохая.
Предварительная производительность приложения
Все показатели зеленые! Похоже, что одно и то же приложение в Preact получило 100% оценку A в GTMetrix. Самая большая отрисовка содержимого (LCP) занимает менее 500 мс, не произошло смещение макета (CLS).
Это выглядит очень впечатляюще. Preact довольно хорошо оптимизировал наше приложение для панели инструментов. Производительность резко возросла по сравнению с React. Давайте теперь проверим время загрузки
Как видно на изображении выше, все приложение загружается за 1,3 секунды, а время до первого байта (TTFB) составляет 179 мс! Preact кажется намного быстрее по сравнению с React и по умолчанию обрабатывает все.
Сравнение обоих приложений
Глядя на загрузку страниц рядом, приложение preact загружается намного раньше, чем приложение React, и время взаимодействия также быстрее, чем приложение реагирования. Preact по умолчанию является прогрессивным веб-приложением (PWA), поэтому мгновенная загрузка при повторных посещениях.
Preact также дает некоторое полезное предупреждение об увеличении размера пакета reg во время сборки, как показано ниже.
Саспенс и лень
Некоторые ограничения, с которыми я столкнулся при переходе на Preact, заключаются в том, что Suspense и lazy загрузка являются экспериментальными и на данный момент не поддерживаются в рабочей среде. но разделение кода на основе маршрутов включено по умолчанию для каталога маршрутов.
Ссылка
Заключение
Судя по приведенному выше сравнению, Preact лидирует по всем параметрам. Благодаря уменьшенному размеру библиотеки и ее скорости Preact позволяет нам сосредоточиться на разработке функций, а не на ручной оптимизации.
Спасибо за чтение.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
