correct-apricot•11mo ago

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.

9 Replies

kapa.ai•11mo ago

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:

import { Suspense } from "react";  

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={"Loading..."}>  
 <LazyComponent />  
</Suspense>

import { Suspense } from "react";  

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={"Loading..."}>  
 <LazyComponent />  
</Suspense>

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:

import React, { Suspense, lazy } from "react";  
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";  
  
const Home = React.lazy(() => import("./Home"));  
const About = React.lazy(() => import("./About"));  
  
const App = () => (  
 <Router>  
 <Suspense fallback={<div>Loading...</div>}>  
 <Routes>  
 <Route path="/" element={<Home />} />  
 <Route path="/about" element={<About />} />  
 </Routes>  
 </Suspense>  
 </Router>  
);

import React, { Suspense, lazy } from "react";  
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";  
  
const Home = React.lazy(() => import("./Home"));  
const About = React.lazy(() => import("./About"));  
  
const App = () => (  
 <Router>  
 <Suspense fallback={<div>Loading...</div>}>  
 <Routes>  
 <Route path="/" element={<Home />} />  
 <Route path="/about" element={<About />} />  
 </Routes>  
 </Suspense>  
 </Router>  
);

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: ----------------------

kapa.ai•11mo ago

<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•11mo ago

I guess I will try this 🙂 thanks @kapa.ai !

kapa.ai•11mo ago

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: ----------------------

kapa.ai•11mo ago

<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below

exotic-emerald•11mo 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

correct-apricot•11mo ago

Hey @alicanerdurmaz thanks for coming back to me. Would you even recommend for us to switch to remix/next ?

exotic-emerald•11mo 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. 🤔

correct-apricot•11mo ago

Thanks for your opinion!