Блог

 const {A, B, C, D} = React.lazy(() => import("../test")); 
 

Деструктурирование нескольких компонентов из одной папки и применение lazy ко всем компонентам? Возможно ли это?

То, что вы описали конкретно, невозможно.

Теоретически возможно уничтожить импорт, но вы не сможете взаимодействовать с ним вне переданного замыкания lazy , потому что оно еще недоступно. Помните, динамический импорт — это функция не React, а браузера. Вы можете уничтожить динамически импортируемый модуль, но для этого потребуется использовать await .

 const {A, B} = await import('your/module');
 

В контексте React это остановит все выполнение в файле, что, очевидно, не то, что мы хотим.

Для того, чтобы он работал должным образом, вам нужно будет выполнить деструкцию в lazy обратном вызове.

Я не смог это проверить, но теоретически это должно работать:

 const ComponentA = React.lazy(() => {
    const {A} = await import("../test");
    return A
})

const ComponentB = React.lazy(() => {
    const {B} = await import("../test");
    return B
})