Коли вас питатимуть, які варіанти оптимізацій ви знаєте, не згадати про React.lazy буде злочином.
React.lazy() - це один із підходів оптимізації першого завантаження сторінки в React. Простими словами, це API яке дозволяє завантажувати компоненти тільки тоді, коли це нам потрібно. Також, це дозволяє завантажувати компоненти паралельно, що значно зменшує розмір основного bundle.
Фактично, React.lazy() є реалізацією code splitting в React. Основна ідея цього підходу - відкласти завантаження важких або рідко використовуваних компонентів.
Як це працює?
React.lazy() приймає функцію, яка повертає динамічний import(), і компонент завантажується асинхронно. Цей компонент буде завантажений лише один раз - у момент, коли він стане потрібним. Після завантаження модуль кешується і повторно не завантажується.