Ленивая подгрузка Реакт-компонентов для оптимизации производительности

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[olegsh]

Очень круто, что ты затрагиваешь темы, которые прям как-будто из повседневной рабочей рутины) буквально недавно этим же вопросом занимался в продакшене)

[snatvb]

ты экономил аж 2кб в данном примере :D
круто конеш что такие ролики выходят, а то новички часто вообще не знают про такую штуку, а на более менее крупных проектах это ой как актуально :)

[uvy.studios]

Быстро, чётко, по делу. Спасибо большое, Михаил!

[victormog]

Функционал уже знал, но Михаил, как всегда, добавил очень полезный *практический* пример использования!
Спасибо!

[МаксимИсаев-ъо]

Мое почтение, особенно понравился рецепт с оберткой outlet

[andygrn]

полезное видео, быстро и подробно объяснил

[XAH]

Михаил, спасибо за видос! Круто и понятно объяснил как lazy работает.
Только судя по комментам - не все понимают зачем это, ведь "экономия на спичках" вроде бы - типа экономия даже в 100кб не имеет смысла в 21 веке.
Но тут дело не в весе бандла как такового, а в том - что происходит с js после его загрузки. Ваш скрипт парсится браузером, затем строится синтаксическое дерево, потом скрипт может быть частично скомпилирован в байткод(), потом там проходят оптимизационные процессы и наверное, что-то еще что я забыл:)
И вот только после этого он "передается" на выполнение и начнает строить нам DOM дерево и пр. ништяки.
Т.е. все эти процессы могут занимать значительное время, которое может быть дольше в несколько раз чем сама загрузка бандла, особенно на слабых машинах.
Поэтому при ленивой загрузке бандл "разбивается", чтобы быстрее происходила обработка кода, а не его загрузка.

[Павел-пэ]

Михаил, как всегда лучший контент! Помню, смотрел вас еще как начинал интересоваться разработкой. С тех пор пишу на Flutter (как-то так получилось). Ваши видео до сих пор смотрю, продолжайте в то же духе.

Поговаривают что скоро Реакт будет обходиться без API запросов, если такое воплотиться в жизнь, увидим ли мы от вас уроки по этой теме?

[dimameshkov]

Приветствую Михаил! Спасибо большое за видео, как всегда всё понятно и приятно :) Было бы здорово увидеть видео по архитектуре. Какую сами на работе используете. Особенно для больших проектов.

[matvienko_p]

классный инструмент. объяснение чёткое!

[andrewsam]

React React React с ума сойду но не разберусь.... Спасибо Вам огромное Михаил за помощь в обучении.

[klubkov]

А как быть когда на lazy-странице есть еще и фетчинг данных? Получится что есть два пендинга 1 от саспенса, а второй от фетча. Как это правильно обрабатывать, чтобы показывать 1 прелоадер?

[АлишерРизабаев-шж]

That you very much от меня подписка и лайк

[K.Partisanov]

Здравствуйте, Михаил! Благодарю за полезное видео, прочитал в статье что lazy не дружит с SSR, что порекомендуете делать в данном случае?

[dev_islom]

Только смотрел другое видео про эту тему и бам новое видео про это

[biLLie_wiLLie]

Спасибо! Очено хочется увидеть от вас полный чеклист подготовки приложения к продакшену. Я слышал, что не надо все компоненты в одну папку пихать - можете рассказать как надо?

[kirillpodolinniy]

Михаил, спасибо большое за видео) Есть вопрос: Мы с одной стороны все собираем в один бандл, чтобы добиться чтобы наши приложение имело крутую откликаемость после полной загрузки, а теперь с приходом саспенса, мы подгружаем каждую страницу отдельно. В чем профит?) Почему нельзя просто повесить лоадер при инициализации сайта и первой загрузки) Прошу прощения, если вопрос тупой, но не вижу бенифитов, кроме как случаев, когда у нас отдельно взятые компоненты по-настоящему тяжеловесные)

[АндрейФ-тж]

Здравствуйте, Михаил!
Благодарю за хороший и ясный пример!
Есть вопрос: "Какую цветовую схему для VS Code вы используете в данном уроке? Очень понравилась ;)"
Заранее благодарю.

[frich]

Привет! Спасибо за видео! Наверное довольно глупый вопрос: при общем весе bundle 410kb на каждую страничку мы выигрываем по 300b (очень мало). По мере роста контента вес странички будет расти, но всё равно всегда 90% веса же будет приходиться не на контент, а ээ общий bundle, который от lazy не зависит? Т.е. эта оптимизация хороша, но не имеет особого смысла в масштабе всего приложения. Или на больших проектах совсем другие цифры?

[tirthadeva_yoga]

Миша, спасибо огромное! Применил данную технологию у себя на сайте. Вроде бы как работает шустрее.
Возник такой вопрос: у меня есть несколько страниц с ссылками на видео YouTube. Внутри страниц есть вкладки аккордеон. Возможно ли применить lazy к отдельной вкладке и если это возможно, то как это сделать?
Заранее благодарю за ответ!