Разделение по бандлам в React JS

По работе была задача уменьшить размер React приложения чтобы быстрее загружалось ©

Начиная с версии 16.6 в Реакте есть встроеный «ленивый загрузчик» модулей: React.lazy. Работает он пока неполноценно (только для export default компонентов и нет ServerSide рендеринга), но зато в «одну строчку» и подхватывается биледрами типа WebPack.

А вот добавление loading/fallback компонента в «одну строчку» разработчики забыли, пришлось написать свой HOC (High Order Component) для помощи стандартному React.lazy()

Встречайте withSuspense() для lazy loading компонентов в React

Пользуйтесь на здоровье 🙂

 

Статические пререндеры для React/Angular/Vue вебсайтов

Решил протестировать различные решения для генерации статического пре-рендера aka «static cache» для новомодных SPA вебсайтов.

Если кратко и по делу

Платные решения типа «Mega SEO for Your SPA» — унылое гавно. Кому-то может и подойдет, но будет дорого и точно так же как у 1005000 других сайтов.

Проще всего сделано в react-snap — установил через npm, добавил «postbuild» скрипт и все как-то работает. Кстати, странное название для продукта если учесть что никакого отношения к React он не имеет и может билдить снапшеты к любому JS проекту.

Готовый пример

Вот результат на примере внутренней старницы SPA на моем сайте Sea Battle by KARPOLAN. Если загляните в консоль, то увидите несколько ошибок…

Основные проблемы на cейчас

  • Ренедр с помощью реального браузера, даже в инкогнито режиме, содержит код уже «исполненых» скриптов аналитики и рекламы.
  • Ренедр с помошью Headless браузера тоже не спасает, более того там прописвается localhost для многих параметров 🙂
  • Веб-сервер надо более тщательно настраивать, чтобы SPA продолжало работать автономно, а не таскало файлы с сервера каждый раз.

Заключение

Open Source «из коробки» ничего не гарантирует да и работает через пень-колоду… Даже react-snap глючит если задать «homepage» в package.json

P.S. В общем угробил очередную субботу 🙂

Правда про IT-шников

Послание от пьяного Карполана для нового поколения IT-шников:

Записано на Silicon Drinkabout в iHub Kyiv группой студентов, будущих ОйТи-шнегов 🙂

P.S. Все будет хорошо, просто выходите иногда из «IT пузыря» в «реальный мир».

Как зарабатывают на веб-сайтах

Большинство веб-сайтов в Интернет не зарабатывают ничего!

Посещаемые веб-сайты

Популярные сайты (начиная от 1000 человек в день) могут зарабатывать на:

  • Показах чужой рекламы (в среднем $1 за 1000 показов для Google AdWords).
  • Продаже ссылок со страниц своего сайта, на страницы заказчиков (от $1 до $100 за «вечную» ссылку).

Популярные веб-сайты

Супер-популярные веб-сайты (100 тысяч и более посетителей в день) помимо указанных методов заработка могут практиковать:

  • Размещение чужого контента: заказные статьи, обзоры товаров и т.д.
  • Уникальные предложения для своей аудитории: купоны со скидкой, лотерея с призом и т.д.
  • Генерация leads с оплатой за действие (CPL или CPA модель).
  • Массовая реклама с оплатой за показы и не важно кликал ли кто по банеру (CPM модель).

Веб-сайты для Бизнеса

Бизнес-сайты не зарабатывают на прямую, а применяются как канал маркетинга, продаж и поддержки отношений с клиентами. В этом случае разные страницы веб-сайта выполняют разные роли:

  • Статьи и обзоры — привлекают посетителей из поисковых систем и других веб-сайтов по ссылкам на наш сайт.
  • Посадочные страницы — конвертируют анонимных посетителей, кликнувших по контекстной рекламе, в заинтересованных клиентов.

Выводы

Веб-сайты без посетителей на зарабатывают ничего.
Зарабатывать на веб сайтах можно разными способами.
Сайты для бизнеса это каналы маркетинга и редко монетизируются напрямую.

Music — Groove is in the Heart

Бессонница. Почему-то вспомнилась старая музыка, пошел гуглить что было и как… Вот офигеный хит начала 90х 🙂

«Groove is in the Heart»