Добрый день.
Предполагается, что на сайте будет некий функционал, который будет использоваться крайне редко.
Данный функционал представлен React-компонентами.
Не хочу включать его в общий бандл (в целях уменьшения размера бандла).
В идеале, было бы неплохо делать ленивую загрузку по требованию.
На данный момент, есть функция-loader, которая принимает URL, по которому необходимо загрузить скрипт, и возвращающая промис.
В нужном месте мы вызываем данную функцию. И в then/catch обрабатываем результат (либо рендерим компонент, либо обрабатываем ошибку.
В общем, имеем что-то вроде этого:
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.onload = resolve;
script.onerror = reject;
script.src = url;
document.body.appendChild(script);
});
}
Использование:
loadScript('/js/lazy-component.js')
.then( ... )
.catch( ... );
В принципе, можно оформить всё несколько иначе. Примерно как описано тут:
https://habr.com/ru/post/443124/
Но это уже детали.
В React есть метод lazy.
Пример из документации:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
Дополнительно
<OtherComponent /> можно обернуть в Suspense.
Проблема в том, что тут используется динамический импорт. Как я понимаю, его поддержка в браузерах пока неочень хорошая. А значит, он мне не подходит.
Далее в документации:
React.lazy принимает функцию, которая должна вызывать динамический импорт: import(). Он должен вернуть Promise, который разрешается в модуль с default
экспортом компонента React.
Использование динамического импорта является обязательным условием?
Либо же есть возможность вместо использования динамического импорта самому вернуть промис?
Если да, то как правильно это написать? Т.к. все мои попытки оказались безуспешными.
В общем, можно ли путём экстримальной селекции и генных мутаций скрестить lazy/Suspense с собственным велосипедом на промисах?
Или может есть ещё какие-либо альтернативы.
Заранее благодарю за любую помощь в решении вопроса.
Средний