How do I use React.lazy? Or what are the alternatives?

Good afternoon.
It is expected that the website will be a functionality that will be used very rarely.
This functionality is represented by React components.
Don't want to include it in the common bundle (in order to reduce the size of the bundle).
Ideally, it would be nice to do a lazy load on demand.
At the moment, is a function of-loader, which takes the URL you want to load the script and return a promise.
In the right place, we call the function. And then/catch process the result (or will render the component, or a processing error.
In General, we have something like this:
the function uses the 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);
});
}

Usage:
uses the loadscript('/js/lazy-component.js')
.then( ... )
.catch( ... );

In principle, it is possible to make all differently. Approximately as described here: https://habr.com/ru/post/443124/
But this is detail.
In React there is a method lazy.
An example from the documentation:
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
the <div>
<OtherComponent />
</div>
);
}

Additionally <OtherComponent /> can be wrapped in Suspense.
The problem is that it uses a dynamic import. As I understand it, his support in browsers is disappointing. So, it does not suit me.
The documentation below:

React.lazy takes a function, which should call for a dynamic import: import(). It should return a Promise that resolves to the module default
exports a React component.

The use of dynamic import is a prerequisite?
Or there is a possibility is the use of dynamic import to return a promise?
If Yes, then how to write it? Because all my attempts were unsuccessful.
In General, whether by extreme selective breeding and genetic mutations to breed lazy/Suspense with own bike on the promises?
Or maybe there are any alternatives.

Thank you in advance for any help in resolving the issue.
March 19th 20 at 09:02
3 answers
March 19th 20 at 09:04
The problem is that it uses a dynamic import. As I understand it, his support in browsers is disappointing. So, it does not suit me.

If you are in your project don't use spordic like webpack, I have bad news for you.
March 19th 20 at 09:06
When you already understand that one request for one bandla much faster than doing lazy loading by making additional requests to the server.
Yes, of course, when first loaded, the render is a little longer, but then this file is cached. Making and loading separate scripts on pages where they are used only slows down because you will loose the time to download the individual scripts. Because it's simple. In the cap ship styles/js only needed for rendering the first screen page, then all in one ball loadable in the basement. Now there is no 2g where speed was 10KB/sec and would need to wait 1 minute to download the whole bundle) In fact, ping will be higher most likely than the download speed bundle with all scripts, especially if you are using a CDN...
Well, if there are heavy and not used by most users features, like charts with Analytics that are not interesting, tools for document generation, editors posts for contentneutral and the like, it makes sense to upload them separately, as they may weigh more than the main bundle and not almost be used by ordinary people. - Brando.Corwin commented on March 19th 20 at 09:09
March 19th 20 at 09:08
If you have bunddler (webpack/rollup/etc), the dynamic import be put in a separate chunk and calling import() converted into something more acceptable to current browsers, is not a city in your bike, don't. But if you really really want, then it is possible to return the promise object for the es-module, react.lazy makes no difference where you get it.

Find more questions by tags ReactJavaScript