0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: react, разделение кода, suspense, react.lazy</p>
1
<p>Теги: react, разделение кода, suspense, react.lazy</p>
2
<p>Когда вы используете<strong>CRA</strong>(create react app) либо<strong>Next.js</strong>, вы должны иметь готовый конфигурационный файл<strong>webpack</strong>. Он создаст одиночный файл (бандл), который и будет содержать все ваше приложение. В определенных обстоятельствах это может стать источником проблемы: если вы применяете сторонние библиотеки либо приложение просто увеличивается в размерах,<strong>становится больше и бандл</strong>. То есть все работает приблизительно следующим образом: - пользователь заходит на сайт; - веб-браузер скачивает весь бандл, а потом все отображает.</p>
2
<p>Когда вы используете<strong>CRA</strong>(create react app) либо<strong>Next.js</strong>, вы должны иметь готовый конфигурационный файл<strong>webpack</strong>. Он создаст одиночный файл (бандл), который и будет содержать все ваше приложение. В определенных обстоятельствах это может стать источником проблемы: если вы применяете сторонние библиотеки либо приложение просто увеличивается в размерах,<strong>становится больше и бандл</strong>. То есть все работает приблизительно следующим образом: - пользователь заходит на сайт; - веб-браузер скачивает весь бандл, а потом все отображает.</p>
3
<p>Все бы ничего, но иногда это существенно<strong>замедляет работу сайта</strong>, поэтому более целесообразным является разбиение бандла на части. Это можно реализовать путем<strong>разделения кода</strong>. Каков профит, спросите вы? Он очевиден: веб-браузер станет закачивать лишь нужные части и то по мере необходимости, а это в свою очередь уменьшит время загрузки сайта.</p>
3
<p>Все бы ничего, но иногда это существенно<strong>замедляет работу сайта</strong>, поэтому более целесообразным является разбиение бандла на части. Это можно реализовать путем<strong>разделения кода</strong>. Каков профит, спросите вы? Он очевиден: веб-браузер станет закачивать лишь нужные части и то по мере необходимости, а это в свою очередь уменьшит время загрузки сайта.</p>
4
<p>Для выполнения поставленной задачи можно задействовать<strong>React.lazy</strong>. Правда, React.lazy и Suspense пока не получится применить для отображения на стороне сервера. Но и эта проблема решаема, правда, уже с помощью<strong>React Loadable</strong>. В документации есть неплохое<a>руководство</a>, посвященное разделению бандлов с серверным отображением.</p>
4
<p>Для выполнения поставленной задачи можно задействовать<strong>React.lazy</strong>. Правда, React.lazy и Suspense пока не получится применить для отображения на стороне сервера. Но и эта проблема решаема, правда, уже с помощью<strong>React Loadable</strong>. В документации есть неплохое<a>руководство</a>, посвященное разделению бандлов с серверным отображением.</p>
5
<p>Итак, разделять код можно различными методами, однако неплохой отправной точкой станет<strong>разделение на основе путей</strong>.</p>
5
<p>Итак, разделять код можно различными методами, однако неплохой отправной точкой станет<strong>разделение на основе путей</strong>.</p>
6
<p>Обычно переходы на новую страницу требуют некоторого времени на загрузку. Если же вы будете по новой отображать всю веб-страницу за раз, пользователи не смогут взаимодействовать с элементами на странице в это самое время.</p>
6
<p>Обычно переходы на новую страницу требуют некоторого времени на загрузку. Если же вы будете по новой отображать всю веб-страницу за раз, пользователи не смогут взаимодействовать с элементами на странице в это самое время.</p>
7
<p>Ниже - пример настройки разделения кода на основе путей и посредством библиотек типа React Router и React.lazy:</p>
7
<p>Ниже - пример настройки разделения кода на основе путей и посредством библиотек типа React Router и React.lazy:</p>
8
<p>Suspense необходим тут на всякий пожарный: он будет показан, когда необходимый бандл ещё не загрузился. Тут же можно использовать и индикатор загрузки, что позволит показать пользователям, что сам процесс не стоит на месте. Также можно применять границы ошибок, причем даже в качестве родителя Suspense в целях обработки других ошибок типа сетевых.</p>
8
<p>Suspense необходим тут на всякий пожарный: он будет показан, когда необходимый бандл ещё не загрузился. Тут же можно использовать и индикатор загрузки, что позволит показать пользователям, что сам процесс не стоит на месте. Также можно применять границы ошибок, причем даже в качестве родителя Suspense в целях обработки других ошибок типа сетевых.</p>
9
<p>React.lazy пока поддерживает лишь экспорт по умолчанию. Но если нужны именованные экспорты, всегда можно заглянуть в<a>документацию React</a>.</p>
9
<p>React.lazy пока поддерживает лишь экспорт по умолчанию. Но если нужны именованные экспорты, всегда можно заглянуть в<a>документацию React</a>.</p>
10
<p><em>По материалам: https://medium.com/wineofbits/concepts-to-become-an-advanced-react-developer-684d90c086c2</em>.</p>
10
<p><em>По материалам: https://medium.com/wineofbits/concepts-to-become-an-advanced-react-developer-684d90c086c2</em>.</p>
11
11