FREE React Hooks Simplified Course:
Performance is something people always worry about, especially in React, but oftentimes the bundle size of an application is ignored when doing performance optimization. In this video I want to talk about how you can minimize the bundle size of your application by using code splitting to only download the code you need when you need it.
📚 Materials/References:
FREE React Hooks Simplified Course:
🌎 Find Me Here:
My Blog:
My Courses:
Patreon:
Twitter:
Discord:
GitHub:
CodePen:
⏱️ Timestamps:
00:00 – Introduction
00:25 – Setup
01:11 – What Is Code Splitting
02:39 – Code Splitting A Function
04:30 – Code Splitting Components
10:40 – Conditional Code Splitting
12:52 – Advanced Code Splitting Concepts
#React #WDS #CodeSplitting
Excellent!
8:00 *milliseconds
Great video clear explanation and example as usual
It is OK to lazy-load rarely used parts of your client-side code, but the reason you have SPAs is to make your client-side highly performant without extra round-trips and delays in normal user interaction. So, I do not agree with the content of this video. Sorry.
Thank you, this is a great feature of React that I wasn't aware of.
But when using TypeScript, passing the path to the component into your lazyLoad function doesn't work.
But if I changed the lazyLoad function to accept a Promise, then pass into it the import('…') and then the namedExport, it works fine.
The suspense in conditional code splitting is kind of redundant no, you are rendering conditionally inside it.
The best way would be to find a way to tell Suspense for what condition you want the component to render…
I don't know why but somehow I can understand your video with my not really good English. Thank you so much mate !😁
How to make `lazyLoad` function on typescript with module autocomplete & module return type?
You're a fkn genius bro I was wondering about this.
😂
Who really wants to keep the user waiting for a component/content to be downloaded on click ?
lazy loading is nice, but what would really help, is that after you load the necessary code (like HomePage), the lazy load should already start downloading async the rest of the code (like Store and About component). There was someone writing about a prefetch, that would really be useful. And if the user really navigates to that tab before it's downloaded async, only then they will see the Loading content ( animation, blur , whatever).
lazy loading basically
awesome
By the way, you can also simulate slow internet using your chrome browser by setting the network speed in the developer tools.
7:45 don' do that again just go to developer tools switch to network tab and set your network speed to 3G
That's interesting. Qwik is doing something like this. It listens to the global window object then brings in the data when there are actions. It could certainly help bring code down on first load.
useful. thanks
hard to debug / modify existing codes. so many pages / files need to open.
Great vid, volume is really low though
In the lazyLoad function, you don’t really need an else statement since you’re returning from the if. Without an else that would be an else regardless. I know some people prefer verbosity, but that’s actually confusing for some. Great video regardless, you’re a very good communicator!
great video,
Nicely done friend. I learn so much from your videos. Thank you.
Sure it speeds things up, however when its fully downloaded on the first go, it should be blazingly fast the next time, right?
How about using react-query instead of lazy and suspence