Использование Preact вместо React
Если вас беспокоит размер и производительность React (особенно для мобильных веб-приложений), существует несколько библиотек клонов React, которые имеют точные те же API-интерфейсы, что и React, но имеют крошечный размер и утверждают, что работают лучше, чем React. Preact - одна из таких библиотек.
Что касается производительности (для приложения Todo), она выглядит УДИВИТЕЛЬНО! Практически такой же, как Мифрил, просто невероятно!
Вы можете запустить тест производительности в своем браузере, перейдя здесь
Мне было любопытно посмотреть, насколько хорошо это работает для моего демонстрационного приложения (live). В основном я хотел увидеть:
- Как легко было поменять местами React и Preact.
- Если все функции в моем приложении, которые используют другие библиотеки, такие как redux, redux-forms и т. Д., По-прежнему работают.
- Насколько меньше уменьшается общий размер.
- Насколько лучше он работает
Вот результаты:
1. Как легко было поменять местами React и Preact.
Было удивительно видеть, что все, что мне нужно было сделать, это установить preact и preact-compat. Затем просто добавьте preact-compat в качестве псевдонима для React и React-DOM в Webpack!
Примечание. preact-compat - это слой размером 2 КБ поверх preact (3 КБ), который делает Preact незаменимой заменой.
- npm install -save preact preact-compat
- Добавьте псевдоним, как показано ниже:
2. Если все функции в моем приложении по-прежнему работают
В моем приложении нет тестов, но поскольку мое приложение небольшое, я протестировал его вручную, и все заработало!
Я также пробовал react-lite, но он вызывал кучу ошибок для моего приложения. Так что рекомендовать не буду.
3. Насколько меньше стало приложение?
Размер gzip уменьшился с 91,8 КБ (React) до 58,2 КБ (Preact). Фактический код уменьшился с 379 КБ (React) до 263 КБ (Preact).
4. Насколько лучше работает мое приложение.
Я не мог заметить разницы, потому что мое приложение очень маленькое. Думаю, это будет похоже на приложение Todo.
БОНУС:
- Preact настолько мал, что вы можете читать его код намного легче, чем React! Это круто!
- Preact поставляется с некоторыми изящными функциями, такими как Связанное состояние и так далее.
ОСТОРОЖНОСТЬ:
- Обязательно тщательно протестируйте свое приложение перед переключением.
2. Вы можете потерять некоторые возможности React.
Но если ваше приложение лучше работает с Preact, почему бы и нет?
🎉🎉🎉 Если вам понравился этот пост, пожалуйста, 1. 💚 его на Medium и 2. пожалуйста, поделитесь им в Twitter 🎉🎉🎉
Мои другие сообщения
ПОСЛЕДНИЕ: Внутренняя работа браузера - для JavaScript и веб-разработчиков Используйте код: INNER15 и получите скидку 50%!
Реагировать на производительность:
- Два быстрых способа уменьшить размер приложения React в рабочей среде
- Использование Preact вместо React
- Внутреннее устройство виртуальной модели DOM (с большим количеством изображений)
Функциональное программирование
- JavaScript является полным по Тьюрингу - объяснение
- Функциональное программирование на JS - с практическими примерами (часть 1)
- Функциональное программирование на JS - с практическими примерами (часть 2)
- Почему Redux нужны редукторы, чтобы они были« чистыми функциями »
ES6
- 5« плохих частей JavaScript, исправленных в ES6»
- Является ли« Класс в ES6 новой плохой частью?»
WebPack
- Webpack - запутанные части
- Замена Webpack и горячего модуля [HMR] (под капотом)
- HMR и React-Hot-Loader Webpack - Отсутствующее руководство
Draft.js
Реагировать и Redux:
- Пошаговое руководство по созданию приложений React Redux
- Руководство по созданию приложения CRUD на React Redux (трехстраничное приложение)
- Использование промежуточного программного обеспечения в приложениях React Redux
- Добавление надежной проверки формы для реагирования на приложения Redux
- Защита приложений React Redux с помощью токенов JWT
- Обработка транзакционных писем в приложениях React Redux
- Анатомия приложения React Redux
- Почему Redux нужны редукторы, чтобы они были« чистыми функциями »
- Два быстрых способа уменьшить размер приложения React в рабочей среде