Использование Preact вместо React

Если вас беспокоит размер и производительность React (особенно для мобильных веб-приложений), существует несколько библиотек клонов React, которые имеют точные те же API-интерфейсы, что и React, но имеют крошечный размер и утверждают, что работают лучше, чем React. Preact - одна из таких библиотек.

Что касается производительности (для приложения Todo), она выглядит УДИВИТЕЛЬНО! Практически такой же, как Мифрил, просто невероятно!

Вы можете запустить тест производительности в своем браузере, перейдя здесь

Мне было любопытно посмотреть, насколько хорошо это работает для моего демонстрационного приложения (live). В основном я хотел увидеть:

  1. Как легко было поменять местами React и Preact.
  2. Если все функции в моем приложении, которые используют другие библиотеки, такие как redux, redux-forms и т. Д., По-прежнему работают.
  3. Насколько меньше уменьшается общий размер.
  4. Насколько лучше он работает

Вот результаты:

1. Как легко было поменять местами React и Preact.

Было удивительно видеть, что все, что мне нужно было сделать, это установить preact и preact-compat. Затем просто добавьте preact-compat в качестве псевдонима для React и React-DOM в Webpack!

Примечание. preact-compat - это слой размером 2 КБ поверх preact (3 КБ), который делает Preact незаменимой заменой.

  1. npm install -save preact preact-compat
  2. Добавьте псевдоним, как показано ниже:

2. Если все функции в моем приложении по-прежнему работают

В моем приложении нет тестов, но поскольку мое приложение небольшое, я протестировал его вручную, и все заработало!

Я также пробовал react-lite, но он вызывал кучу ошибок для моего приложения. Так что рекомендовать не буду.

3. Насколько меньше стало приложение?

Размер gzip уменьшился с 91,8 КБ (React) до 58,2 КБ (Preact). Фактический код уменьшился с 379 КБ (React) до 263 КБ (Preact).

4. Насколько лучше работает мое приложение.

Я не мог заметить разницы, потому что мое приложение очень маленькое. Думаю, это будет похоже на приложение Todo.

БОНУС:

  1. Preact настолько мал, что вы можете читать его код намного легче, чем React! Это круто!
  2. Preact поставляется с некоторыми изящными функциями, такими как Связанное состояние и так далее.

ОСТОРОЖНОСТЬ:

  1. Обязательно тщательно протестируйте свое приложение перед переключением.

2. Вы можете потерять некоторые возможности React.

Но если ваше приложение лучше работает с Preact, почему бы и нет?

🎉🎉🎉 Если вам понравился этот пост, пожалуйста, 1. 💚 его на Medium и 2. пожалуйста, поделитесь им в Twitter 🎉🎉🎉

Мои другие сообщения

ПОСЛЕДНИЕ: Внутренняя работа браузера - для JavaScript и веб-разработчиков Используйте код: INNER15 и получите скидку 50%!

Реагировать на производительность:

  1. Два быстрых способа уменьшить размер приложения React в рабочей среде
  2. Использование Preact вместо React
  3. Внутреннее устройство виртуальной модели DOM (с большим количеством изображений)

Функциональное программирование

  1. JavaScript является полным по Тьюрингу - объяснение
  2. Функциональное программирование на JS - с практическими примерами (часть 1)
  3. Функциональное программирование на JS - с практическими примерами (часть 2)
  4. Почему Redux нужны редукторы, чтобы они были« чистыми функциями »

ES6

  1. 5« плохих частей JavaScript, исправленных в ES6»
  2. Является ли« Класс в ES6 новой плохой частью?»

WebPack

  1. Webpack - запутанные части
  2. Замена Webpack и горячего модуля [HMR] (под капотом)
  3. HMR и React-Hot-Loader Webpack - Отсутствующее руководство

Draft.js

  1. Почему Draft.js и почему вы должны вносить свой вклад
  2. Как Draft.js представляет данные в формате RTF

Реагировать и Redux:

  1. Пошаговое руководство по созданию приложений React Redux
  2. Руководство по созданию приложения CRUD на React Redux (трехстраничное приложение)
  3. Использование промежуточного программного обеспечения в приложениях React Redux
  4. Добавление надежной проверки формы для реагирования на приложения Redux
  5. Защита приложений React Redux с помощью токенов JWT
  6. Обработка транзакционных писем в приложениях React Redux
  7. Анатомия приложения React Redux
  8. Почему Redux нужны редукторы, чтобы они были« чистыми функциями »
  9. Два быстрых способа уменьшить размер приложения React в рабочей среде

Salesforce

  1. Разработка приложений React Redux в Visualforce Salesforce