Динамическая загрузка фрагментов кода с учетом маршрутов приложения для уменьшения размера пакета и повышения производительности.
Почему
В ваше приложение постоянно добавляются новые страницы, что приводит к новым дополнениям к кодовой базе, то есть к компонентам, контейнерам и т. Д. По мере того, как в ваше приложение добавляется все больше и больше компонентов, очевидно, что размер окончательного пакета, вероятно, увеличится, до такой степени, что это начинает влиять на производительность приложений. Чем больше размер пакета, тем больше времени требуется браузерам для загрузки веб-страницы. Следовательно, оптимизация размера пакета является важной темой.
Как
React Lazy and Suspense - мощный инструмент, который поможет вам добиться необходимой нам оптимизации. Он работает, динамически получая компоненты, когда они требуются вашему приложению, а не добавляет их в основной пакет, который будет извлекаться браузером в самом начале.
Ссылка на документацию: https://reactjs.org/docs/code-splitting.html#reactlazy.
Решение о том, что следует загружать динамически, а что должно оставаться в составе основного пакета, довольно специфично для каждого отдельного приложения. Кроме того, разбиение приложения на очень мелкую детализацию для динамической загрузки, скорее всего, не лучшее решение в этом случае, поскольку каждая отложенная загрузка подразумевает вызов из браузера для получения необходимого контента.
Имея это в виду, разделение фрагментов кода по маршрутам приложения может быть полезным решением. Давай попробуем.
Динамическая загрузка контента на основе маршрутов
Возьмем пример довольно распространенного дизайна приложения со следующими страницами:
Главная | О нас | Услуги
Можно с уверенностью предположить, что за обработку этих маршрутов отвечают отдельные контейнеры. Итак, почему мы должны требовать, чтобы контент, относящийся к странице «Услуги», добавлялся в пакет, когда пользователь переходит на главную страницу? Следовательно, ленивая загрузка маршрутов может привести к очень эффективному решению разделения кода.
Давайте реализуем React Lazy и Suspense для нашего приложения.
LazyLoader.js
App.js
В конечном итоге это приведет к созданию отдельных фрагментов для каждого маршрута, вместо того, чтобы иметь один тяжелый связанный файл, что позволит вам сделать еще один шаг в улучшении производительности приложения.
