The best way to use async/await with import, to import React Componenet

performance
1

Hy,

I tried to make my web site to load very quickly, so I implement the dynamic import like this

const AddPrice = async () => await import('/imports/ui/pages/AddPrice.jsx');

and the router I mad it like this

....
        <Route path="/AddPrice" component={AddPrice()}  />
....

But It does not seem to work;

Any idea on how to do it correctly , please ?

2

I use react-loadable for this and it works well: https://github.com/jamiebuilds/react-loadable

1 Like
3

Thank’s for reply,

I saw it before, did nt try it beaucse I think it require more code to implement it; can I see how you implement it please ?

4

Sure:

const AsyncComponent = Loadable({
  loader: async () => import('/imports/ui/pages/Component.jsx'),
  loading: null
});

<Route path="/" component={AsyncComponent}  />
1 Like
5

wow, that’s look awsome, I ll give it a try

Thank’s a lot