4

I was looking into code splitting and lazy loading in the react docs where it mentions that

The lazy component should then be rendered inside a Suspensecomponent, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

I am not super clear on the meaning of `load` here - does it mean loading into the memory or fetching over the network and load into the memory?

If it defers the fetching, then how do we know which endpoint to hit to fetch the split chunk from when the component is needed?

I came across this demo on codesandbox where it has every tab lazily loaded

const Tab1 = lazy(() => import("./components/tabs/Tab1"));

const Tab2 = lazy(() => import("./components/tabs/Tab2"));

const Tab3 = lazy(() => import("./components/tabs/Tab3"));

const Tab4 = lazy(() => import("./components/tabs/Tab4"));

But by checking the network tab, I don't see new requests coming out when I switched the tabs. Am I missing the point of code splitting and lazy loading here?

2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.