JavaScript: React Lazy loading — ленивая загрузка

Асинхронная загрузка элементов — это один из наиболее мощных инструментов, которые можно использовать для увеличения производительности веб-страниц.


Частичный перевод статьи «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
React.lazy

Это можно улучшить использовав комбинацию React.lazy и Suspense — компонент, который позволяет нам показывать некоторый «fallback» интерфейс пока React.lazy получает компонент с сервера и тем самым предотвращает показ пустого места пользователю пока он ждет.

Suspense
Suspense

Как видите, это очень простое, но в то же время полезное решение, которое может помочь существенно ускорить интерфейс написаный на React.