Асинхронная загрузка элементов – это один из наиболее мощных инструментов, которые можно использовать для увеличения производительности веб-страниц.
Частичный перевод статьи “React. 5 tricks to improve the performance of your applications” с сайта medium.com
Начиная с React 16.6 мы можем использовать React.lazy для реализации асинхронной подгрузки компонентов. Комбинация React.lazy с Suspense способствует разделению кода, таким образом мы загружаем только то что нам нужно в любой момент времени.
Для реализации данного способа просто оберните динамический import компонента в React.lazy.
Это можно улучшить использовав комбинацию React.lazy и Suspense – компонент, который позволяет нам показывать некоторый “fallback” интерфейс пока React.lazy получает компонент с сервера и тем самым предотвращает показ пустого места пользователю пока он ждет.
Как видите, это очень простое, но в то же время полезное решение, которое может помочь существенно ускорить интерфейс написаный на React.