React.lazy() сейчас поддерживает только дефолтные экспорты. Именованные экспорты он напрямую не поддерживает.
Чтобы работать с именованными экспортами, создай промежуточный модуль, который переэкспортирует нужный компонент как дефолтный экспорт. Такой подход сохраняет функциональность tree shaking и не позволяет неиспользуемым компонентам попасть в бандл.
Определи несколько именованных экспортов в исходном файле компонента:
// MoreComponents.js
export const SomeComponent = /* ... */;
export const UnusedComponent = /* ... */;
Создай новый модуль, который переэкспортирует только нужные компоненты как дефолтные экспорты:
// IntermediateComponent.js
export { SomeComponent as default } from "./MoreComponents.js";
Импортируй компонент через React.lazy() и промежуточный модуль:
import React, { lazy } from 'react';
const SomeComponent = lazy(() => import("./IntermediateComponent.js"));
Этот паттерн — рекомендуемый подход, когда тебе нужно использовать именованные экспорты с code splitting в React.
React.lazy() может напрямую импортировать named exports без использования промежуточного модуля или обходных решений.
Новый — ещё не проверен сообществом
Вы