История четырёхкратного ускорения React-приложения

[red_perez]

Почти 60% посетителей сайта покидают его в том случае, если его загрузка занимает более 3 секунд. 80% таких посетителей на сайт уже не возвращается.

Возможно дело не столько в скорости загрузки, сколько в обилии раздражающей анимации, банеров, всплывающих окон, и прочей маркетинговой лабуды.
Я, обычно, закрываю такие сайты, если не могу в несколько кликов пробиться к интересующей меня информации.

[Duster]

Особенно бесит, когда анимация сделана ради анимации, и приходится либо ловить ссылку мушкой, либо ждать завершения «вау я у мамы дезигнер» выпендрежа.

[Peter1010]

Тут ещё смотря что имеется в виду под загрузкой.
Если я зашёл и у меня белый экран, то да, секунда 2-3 и человек закроет. (но лично я проверю расширение NoScript).
В вот, если появится хотя бы полоска загрузки, или ещё что-то указывающее что сайт загружается, и надо подождать, то ок.

[alexesDev]

styled-componets v3 были в 3 раза медленнее обычного css. Половина этих лагов связна с поддержкой тем, который мы даже не использовали. И используя styled-components стоит понимать что вместо обычного 'div' строки, которая уходит в недра react, получается class MyCustomDivWithStyles extends React.Component. Это тысячи новых классов на пустом месте, если использовать везде.

Если в проекте уже используется styled-components, то можно убрать его на верхних уровнях дерева (всякие layouts и тп) и прилично ускорить приложение. Те styled-components плюс минус нормально работает для всяких Button, а для MainLayout — дикий ужас.

[Carduelis]

Только уже давно вышла v4, которая значительно быстрее.
Уже почти вышла пятая версия: 50% faster server-side rendering, 20% faster client-side rendering, 19% smaller bundle size, RTL support and no breaking changes!

Честно говоря, проблема с множествами однотипными компонентами решается их мемоизацией. Этот самый MainLayout значительно ускорился, когда я добавил React.memo().

[alexesDev]

Может быть у меня психологическая травма после переписывания styled-components на css. Но это увеличило время первого рендера (react.memo) тут не поможет с 800мс до 200мс.

[Carduelis]

Не важно, первый рендер тоже будет ускорен. Вы же не используете на странице каждый раз каждый элемент с новым набором props? Всякие тормозящие обертки из <Box> или <Grid> будут закешированы после первого же использования в корне лэйаута.

[Carduelis]

Кстати, когда вы получали свою травму (no offence), как вы переделывали динамические свойства? Каждый раз использовали state? Или написали свой переключатель (классов и/или инлайн-стилей)?

[Carduelis]

Кстати, я решил перевести статью о пятой версии: https://habr.com/ru/post/456422/

[irsick]

получается class MyCustomDivWithStyles extends React.Component

Используйте функциональные компоненты и makeStyles

[acsent1]

Каким инструментом можно проверить свой сайт?

[KhodeN]

Начните со встроенной в Chrome вкладки Audits (там Google Lighthouse)

[comerc]

Я — большой любитель Material Design. Для React написана замечательная Material-библиотека, которая называется material-ui. У этой библиотеки есть лишь одна проблема. Это — её размер. Она очень велика. Даже если пользоваться лишь отдельными её компонентами, в бандл попадёт её реализация механизма CSS-in-JS, а это — примерно 30 Кб минифицированного кода. Каковы альтернативы? Я решил построить собственные компоненты, стилизуя их в процессе создания приложения.

Обнять и плакать. babel-plugin-import

[faiwer]

Так он же выше и пишет, что "пользоваться лишь отдельными её компонентами". Что мол сборка-минимум уже 30 KiB

[JiLiZART]

Еще можно вот такое чудо сделать и выйграть дофига килобайтов

.babelrc

presets: [
  ['@babel/react', {pragma: 'h'}]
]

webpack.config.js

plugins: [
  new webpack.ProvidePlugin({
      h: ['react', 'createElement']
  })
]

[JiLiZART]

А еще можно вместо React подключить https://preactjs.com/ и еще выйграть кучу килобайтиков

[faiwer]

а маленьким шрифтом со звёздочкой не стоило добавить: "на ранних этапах создания приложения"? :)

Хак с Pragma-h после gZip уже не будет таким впечатляющим. А вот вырезание prop-types должно дать ощутимый прирост.

[Chamie]

В этот объём входила хорошая библиотека анимации и система работы с жестами, которые можно использовать не только для слайд-шоу, но и в других частях приложения. И выглядит то, что у меня получилось, гораздо лучше, чем стороннее решение.
…
Посмотреть этот слайдер в действии можно здесь.

Да что уж, охрененно выглядит, просто охрененно!</sarcasm>

Демонстрация в ФФ