Barrel files + import count causing long loading times
Hey everyone, first of all again a big thanks to the refine Core and the community around. I've never build products in this fast pace and ease using React before.
I have an optimization problem that I'd like to describe. We're using Vite and the SPA approach to Refine, but that's causing a long load since we have a large number of components we are loading. Currently the number is 3387 components, which is totally fine for production, since we're just loading a big old chunk of JS and everything is fine. Due to Vite's HMR it's loading those 3387 components consequtive, which (like in 3 seconds) is fine for me, but I have to get some slower laptops onboard and their loading time exceeds the acceptable initial timeframe of around 30 seconds.
Maybe someone from @core as an idea on how to approach this situation? I've already integrated Suspense, so lazy might be an idea, but I don't know how to properly lazy load the components in Refine.
![No description](https://cdn.answeroverflow.com/1148183411404591204/Bildschirmfoto_2023-09-04_um_11.04.50.png)
9 Replies
Hi @bastianwegge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hello, it's great to hear that you're finding refine useful for your project!
To optimize the loading time of your application, you can indeed use lazy loading. This technique allows you to load only the necessary resources when they're needed, instead of downloading everything at once. This way, users don't have to wait for all the resources to be downloaded before they can use the site or app.
In refine, you can use React's
React.lazy
and Suspense
for lazy loading. Here's a basic example of how you can use them:
In this example, LazyComponent
will only be loaded when it's about to be rendered. Suspense
is used to display a fallback UI ("Loading...") while LazyComponent
is being loaded.
For route-based components, you can also apply lazy loading. Route-based components are components that are loaded when a specified URL is navigated to your application. Here's an example:
In this example, Home
and About
will be broken off into their separate bundles. These bundles will be loaded when any of the page routes attached to the component is loaded.
Remember to handle any loading errors that might occur when using React.lazy
. You can do this by wrapping the Suspense
component that contains your lazy-loaded components in an ErrorBoundary
component.
For more information, you can refer to these blog posts on React Lazy Loading (https://refine.dev/blog/react-lazy-loading/) and React Suspense Guide (https://refine.dev/blog/react-suspense-guide/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
wise-white•13mo ago
I guess I will try this 🙂 thanks @kapa.ai !
Let me check the knowledge base for you. One moment! :books:
----------------------
You're welcome! If you have any more questions or run into any issues, feel free to ask. Happy coding!
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
cloudy-cyan•13mo ago
Hello @bastianwegge,
You already point that, I think you are right. code-splitting is your need.
refine does not automatically do that because remix and nextjs does perfect job on this subject.
but with vite, we need to do this manually
wise-white•13mo ago
Hey @alicanerdurmaz thanks for coming back to me. Would you even recommend for us to switch to remix/next ?
cloudy-cyan•13mo ago
In such a large project, if features like serverSideProps (or other server-side features) are not needed, I don't think it would be worth it. 🤔
wise-white•13mo ago
Thanks for your opinion!