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
kapa.ai
kapa.ai259d 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
kapa.ai259d ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
rare-sapphire
rare-sapphire259d ago
I guess I will try this 🙂 thanks @kapa.ai !
kapa.ai
kapa.ai259d 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
kapa.ai259d ago
<@317433576721219584> kapa.ai is still learning and improving, please let us know how it did by reacting below
optimistic-gold
optimistic-gold259d 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
rare-sapphire
rare-sapphire259d ago
Hey @alicanerdurmaz thanks for coming back to me. Would you even recommend for us to switch to remix/next ?
optimistic-gold
optimistic-gold259d 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. 🤔
rare-sapphire
rare-sapphire259d ago
Thanks for your opinion!
More Posts
MuiAutocomplete narrowing optionsHello, I have troubles to make MuiAutocomplete according to your documentation. In my App it doesn'tInferencer stopped workingI'm unable to use Inferencer. I was using it earlier. I even tried to rollback to the old old versioTSX page format DateField with i18n localeHow on my custom TSX page format DateField with i18n locale? I cannot obtain current i18n locale by In my page strings are not translatedHello i created a page through the inferencer code, now i'm using this code but strings are not tranlist, default pageSizecurrent the pageSize always default to 10, how to change that value?Localize datetime from Strapi dataHello, i used the tool online downloading an example for my project next.js + strapiv4+materialui I VulnerabilityDoes anyone encounters this issues when using refine? marked <=4.0.9 Severity: high Inefficient ReBring Inference autogenerated Code to my pageHello, i used the tool online downloading an example for my project next.js + strapiv4+materialui I How do i set initial value onto useSelect with its label and also value?using useSelect antdesignanyone facing White screen of death whenanyone facing White screen of death when creating a MUI with example pages using vite js?Scroll on mobile with autocompleteHello. I have a small problem when I use autocomplete, when scrolling items on mobile phones, for soDefault query result duplicates the options of select options.Previously I have asked a question regarding how to create a custom option in select input https://dAdd Type to useFormHow do I make the object that I am manipulating, with the help of useForm hook, type safe? For instFreshed downloaded boilerplate app layout messed up on refreshHi, I created and downloaded a fresh app of Next.js + AntD + Custom Auth + RestAPI. When I run it loGoogle OAuth Not WorkingHi all, I have initialised a refine project using React + Vite config, and selected Google OAuth as Trigger AutoSave inside useFieldArrayHow to make use of AutoSave feature? I have implemented table using useFieldArray but it doesn't savhello guys need helphello guys, need helpCustom url for create<Create resource="rules"/> How can i change the create url endpoint, i want api path to be differeni tried a blog post to authenticate myi tried a blog post to authenticate my next js app but i'm getting some issues like when i try routeNo List ViewHey hey -- I have an endpoint that I DO NOT want to have a list view. Is there a way to change th