Thought the exact same thing. Best part IMO of the network tab is the ability to set a custom TTFB which is a very real and practical scenario to test.
That is pretty useful, but for what it's worth doing this particular task with dev tools throttling would have required waiting much longer for react itself to download than for the component to download... the way he did it was actually a lot better for the demonstration.
Asynchronous imports aren't just a cheat code to making your app faster. You should only use it if there are portions of the app that are not needed until the user initiates some process. For example if some component is hidden until the user clicks a button, then you could asynchronously import that component.
There is also a prefetch variable for webpack which download that resource when the engine is idling. It is not quite the same situation but i wanted to point that out
@@Cotita yes but my point was that it's important to know how and why to use this feature. Just throwing around async imports everywhere isn't necessarily going to improve anything.
Code Splitting is Splitting bundle into multiple parts that can be downloaded over time ('lazy loading") . That help us to easy optomize our application , fix real performance issues...
Uff.Thanks so mu h for this lovely video. I was so dejected thinking i needed to read Webpack from scratch to understand Code splitting. You just cleared it up for me in the first 5 mins itself. Thanks so much
At 07:52 To depict Loading... you don't need to add wait. You can simply open up your console, Go into Network Tab. In the bottom layer, you'll see "No throttling", click that and change it to "Slow 3G" and there you go. You can actually see how your fallback will work when there is a delay in your network.
I was struggling with permission based access for the user in my app. Things weren't working very well. Now, I think things will be fine when I use the useTransition hook. Great!
Kyle, this is a great video. However, I think there are a few additions that would've made it better: 1) In addition to showing files being downloaded piece by piece, demonstrating this using network tab in the dev console would've also be a great way to show people how to also make the most out of the dev console by debugging network latency, Showing them that you're downloading the entire client app in one go versus downloading it bit by bit as the user uses the site over time. 2) Another dev console trick would've been to demo the way emulation of 4g internet works by using the throttling feature in the network tab as well. That wait function is pretty cool but these tools were built for developers in mind. 3) Finally, if you added a build script and built the app, showing people how the bundle was created as just one large js file before lazy loading but after adding lazy loading, it bundles itself into multiple smaller bundles.
So useful! My react app was taking long minutes to be loaded it weights something around 700MB, and my computer is a little weak, i thought it could be this, cause, until now, i didn't even know this was possible.
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!
I think it's important to note that the helper function at 15:06 will not work in production builds depending on the build tool you're using because the transpiler can't guess ahead of time what you're going to import through that function (Vite even warns you about that). I tested it with Vite + TypeScript (no SWR) and while it does work fine in dev mode, it will not work in production mode. The transpiler doesn't create the imported JS files in the destination directory and the app will try to dynamically import "/assets/components/Something(.js/.ts)" which obviously doesn't exist. Unfortunately, I don't think there's a workaround for this in JS alone, but there could be build plugins for it.
100% this answer. When you run a large app, the last thing you want is failed to load dynamically imported module clogging up your logging and getting calls from your Bridge.
You forgot to add this is only suitable for really huge components. If you "lazyload" all the things you are actually slowing down your application at runtime to gain faster load at the start. This way your page/app will become laggy on slower connection speeds and this is not advised in production. It has terrible impact on look&feel. You want your apps to be responsive and snappy even if it loads 0.2s slower at the beginning, you will probably never reload this page (SPA) and most of the things will get cached.
Great video. You can use both default and named export at the same time, so technically you can use default for the main component that needs to be loaded in the route. I always use both!
Thanks, Kyle. Instead of writing wait promise and more codes (because this is web dev simplified), it was better to use fast or slow 3G throttling from network tab.
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.
Kyle you have a problem your audio output on your videos. Use +0db or not use lower then -2db and alsoe there is audio balancer tools on video editing tools if you worried about audio changes. I just have to turn up the volume almost all the way for your videos and I can't turn anything else on, because any other audio output, video music etc. it's terribly loud.
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.
I have changed many files from named export to default export in order to apply lazy loading. Then, I found a lib react-lazily which help me do the job. Anyways, thank for sharing the lazyLoading function. cool!
considering its pros, should we always use it? there wasn’t much discussion about its disadvantages so i’m not sure if it’s bad to always split code like that
Hi Kyle, TY for the content, very useful videos I usually use Lazy loading and suspense, but something that I didn't fully understand from your video was: What is the difference between using the fallback prop in VS useTransition ?
Hey everyone! I found that when you use the `lazyLoad()` function that Kyle created, vite cannot analyze the dynamic path for the import and therefore will not be able to properly build the js and file paths for these components when you run the build command. To get around this I found that you can pass the whole import function into the custom function like this `lazyLoad(import('./components/AdminData.jsx'), 'AdminData')` and use that instead of assigning the promise variable. This keeps the import path static so vite can work with it during build time. `export const lazyLoad = (importCall, namedExport) => { return lazy(() => { if (namedExport == null) return importCall; return importCall.then(module => ({ default: module[namedExport] })); }); }`
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).
They are great strategy for specific need, however if u required to do so much of the code splitting on so many components, u might as well go for micro front-end, solve it entirely instead of pieces here and there
Most of the apps are not really need "FAST" onboard loading, 1-2 secs is acceptable Or you can keep landing page simple and fast for SEO, and only open actual app when user click 'Open App'
Wow... Thanks a bunch. This will help a lot. There's a project that I'm currently working on; after building it up... One of the main js files is about 24mb... How can I optimise it more... It takes a lot of data and time to load from the web server.
Love Suspense, found out about it from @PedroTech’s channel. This is nice to do at a component level when you want parts or the page to be interactive prior to loading an item
If you build everything in a single JS file, what is a dynamic import for you? Is a "dynamic import" but it is not a "dynamic download"... so, the optimization is for the RAM ? ... you download everything in one time for SPA
A nice method I use for simulating a slow connection is to run my React server out of a docker container, but use an Nginx container to proxy there configured to slow down the connection
I only ever worry about this once my bundles get bigger then 500kb otherwise, I'd prefer to load data ahead of time for a smoother app experience. If you do this with every component your app will just be loading states everywhere and it doesn't look/feel smooth.
@@internet4543 yeah, defineAsyncComponent is a function. Just a generic function wrote in JavaScript.. you import it like any other function. Unless you wanna say importing a function from a module is not vanilla enough for you. Can I also recommend some anger management. You seem to have gone from zero to 11 for no reason.
Go back to your Vue world, I guess? I mean, why do you feel the need to let everyone know there's something improved on Vue 3 specifically? Sure, you probably just wanna share it with everybody here but, again, just go back to your Vue world would be some kind action of you. Because why, you ask? Honestly speaking tho, we don't care about your shit and just go F urself ok?
@@internet4543 Sorry, I was unaware you were unable to read my first message.. the anger makes sense now. You must feel the world is a scary place when you are unable to understand the simple things that go on around you. Just know we are all here to be friends and no one is laughing at you.
7:53 You can always simulate slow connections via Web Console > Network > throttling > Slow3G
I was wondering why he didn't do that also because he's already used it in videos such as ua-cam.com/video/ZVug65gW-fc/v-deo.html
@@pearl911 I'd say using a wait function makes the wait time more deterministic. And you can change the wait time to however long you want.
Thought the exact same thing. Best part IMO of the network tab is the ability to set a custom TTFB which is a very real and practical scenario to test.
Kyle showed an example of a useful Promise 😉
That is pretty useful, but for what it's worth doing this particular task with dev tools throttling would have required waiting much longer for react itself to download than for the component to download... the way he did it was actually a lot better for the demonstration.
Asynchronous imports aren't just a cheat code to making your app faster. You should only use it if there are portions of the app that are not needed until the user initiates some process. For example if some component is hidden until the user clicks a button, then you could asynchronously import that component.
There is also a prefetch variable for webpack which download that resource when the engine is idling. It is not quite the same situation but i wanted to point that out
Like lazy loading in angular?
@@gabrielemarino1360 this should be better, let the engine do the job for u
And why would you not load portions of the app that are not needed yet? Why not just load them from the beginning? To make the app faster, genius.
@@Cotita yes but my point was that it's important to know how and why to use this feature. Just throwing around async imports everywhere isn't necessarily going to improve anything.
Code Splitting is Splitting bundle into multiple parts that can be downloaded over time ('lazy loading") . That help us to easy optomize our application , fix real performance issues...
The quality of these vids has gone way up over the years man! Well spoken.
Uff.Thanks so mu h for this lovely video. I was so dejected thinking i needed to read Webpack from scratch to understand Code splitting. You just cleared it up for me in the first 5 mins itself. Thanks so much
That's the best thing ever. I didn't even think that this could be a thing in React at all. Thanks for making this video! 💕
At 07:52 To depict Loading... you don't need to add wait. You can simply open up your console, Go into Network Tab. In the bottom layer, you'll see "No throttling", click that and change it to "Slow 3G" and there you go. You can actually see how your fallback will work when there is a delay in your network.
I watched this lesson 2 month ago, but always try to revise your videos. Thanks!
I was struggling with permission based access for the user in my app.
Things weren't working very well.
Now, I think things will be fine when I use the useTransition hook.
Great!
Please bring more videos related to performance improvement, aria, testing related, logging, debugging issues, improving css loading time etc
this guy is a busy guy bro, probably has a full time dev job, he runs his own business and he makes videos, 😂, work ethic i aspire to have
Kyle, this is a great video. However, I think there are a few additions that would've made it better:
1) In addition to showing files being downloaded piece by piece, demonstrating this using network tab in the dev console would've also be a great way to show people how to also make the most out of the dev console by debugging network latency, Showing them that you're downloading the entire client app in one go versus downloading it bit by bit as the user uses the site over time.
2) Another dev console trick would've been to demo the way emulation of 4g internet works by using the throttling feature in the network tab as well. That wait function is pretty cool but these tools were built for developers in mind.
3) Finally, if you added a build script and built the app, showing people how the bundle was created as just one large js file before lazy loading but after adding lazy loading, it bundles itself into multiple smaller bundles.
"multiple smaller bundles" - a.k.a. chunks
3 was really missing!
thanks :)
Nice suggestions indeed!
Great suggestions!
So useful! My react app was taking long minutes to be loaded it weights something around 700MB, and my computer is a little weak, i thought it could be this, cause, until now, i didn't even know this was possible.
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!
Good God, finally a valid explanation of this topic. Thanx a lot sir.
16:20 Important to NOTE when you implement a lazy with a separate file.
Simply WOW , this may super useful when we working on complex applications
Man, you are a true hero! Thank you very very much for the amazing content!
I think it's important to note that the helper function at 15:06 will not work in production builds depending on the build tool you're using because the transpiler can't guess ahead of time what you're going to import through that function (Vite even warns you about that). I tested it with Vite + TypeScript (no SWR) and while it does work fine in dev mode, it will not work in production mode. The transpiler doesn't create the imported JS files in the destination directory and the app will try to dynamically import "/assets/components/Something(.js/.ts)" which obviously doesn't exist. Unfortunately, I don't think there's a workaround for this in JS alone, but there could be build plugins for it.
which means you are expected to leave your code un-bundled as if in dev mode if you are going to use this dynamic import cheat.
100% this answer. When you run a large app, the last thing you want is failed to load dynamically imported module clogging up your logging and getting calls from your Bridge.
Just pass the import("whatever.js") to the helper function instead of just the filename, problem solved.
Thank you so much. i wasted so much time not knowing this.
This worked for me
function lazyLoad(fileName, isNamed) {
return lazy(() => {
const promise = import(`./${fileName}`);
if (isNamed) {
return promise.then(module => ({ default: module[fileName] }));
}
return promise;
});
}
You forgot to add this is only suitable for really huge components. If you "lazyload" all the things you are actually slowing down your application at runtime to gain faster load at the start. This way your page/app will become laggy on slower connection speeds and this is not advised in production. It has terrible impact on look&feel. You want your apps to be responsive and snappy even if it loads 0.2s slower at the beginning, you will probably never reload this page (SPA) and most of the things will get cached.
Great video. You can use both default and named export at the same time, so technically you can use default for the main component that needs to be loaded in the route. I always use both!
indeed, I always use the way like that,
If i use default should i adding second paraneter in lazyload function?
Thanks, Kyle. Instead of writing wait promise and more codes (because this is web dev simplified), it was better to use fast or slow 3G throttling from network tab.
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.
Always things i've never heard about before. Great stuff!
I was waiting for your new video, hanging around the playlist section .
add lazy loading on routes file is game changer. TY!
I don't know why but somehow I can understand your video with my not really good English. Thank you so much mate !😁
I always wait for your content about React JS. Thank you for the knowledge 🙏
Great video Mr. Simplified. Thank you!
Nicely done friend. I learn so much from your videos. Thank you.
Great Explanation Bro
Have learned a lot from you bro, ❤️ from Bangladesh
the way you explain >>>>
By the way, you can also simulate slow internet using your chrome browser by setting the network speed in the developer tools.
Kyle you have a problem your audio output on your videos. Use +0db or not use lower then -2db and alsoe there is audio balancer tools on video editing tools if you worried about audio changes. I just have to turn up the volume almost all the way for your videos and I can't turn anything else on, because any other audio output, video music etc. it's terribly loud.
I loved this video. I understood way better the concept of code splitting. I can now apply this knowledge, Thank you very much Kile😁
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.
I have changed many files from named export to default export in order to apply lazy loading. Then, I found a lib react-lazily which help me do the job. Anyways, thank for sharing the lazyLoading function. cool!
Great video clear explanation and example as usual ⭐
considering its pros, should we always use it? there wasn’t much discussion about its disadvantages so i’m not sure if it’s bad to always split code like that
Hi Kyle, TY for the content, very useful videos
I usually use Lazy loading and suspense, but something that I didn't fully understand from your video was: What is the difference between using the fallback prop in VS useTransition ?
Great explanation, bro!
Thats some real advanced knowledge
Hey everyone! I found that when you use the `lazyLoad()` function that Kyle created, vite cannot analyze the dynamic path for the import and therefore will not be able to properly build the js and file paths for these components when you run the build command.
To get around this I found that you can pass the whole import function into the custom function like this `lazyLoad(import('./components/AdminData.jsx'), 'AdminData')` and use that instead of assigning the promise variable. This keeps the import path static so vite can work with it during build time.
`export const lazyLoad = (importCall, namedExport) => {
return lazy(() => {
if (namedExport == null) return importCall;
return importCall.then(module => ({ default: module[namedExport] }));
});
}`
Another awesome video. Tks.
Thanks for this video. Design is very human, easy to use) Thanks ❤
Thats basically a Resumable Hydration (Up to 4:25), that is what Qwik is doing under the hood
Nice, ive learn something new. Good job
That's why we Use Nextjs For production ready app.
you can also throttle your network from the chrome dev tools
Great video clear explanation and example as usual
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).
Great as always. Thank you, Kyle!
Great video, thank you. Splitting stuff into more bits is not just making app faster, but its also good for separation of concerns.
Great video as always! Keep it up, you're an essential instructor in the Javascript ecosystem 😎
Thanks for sharing your knowledge ❤ Please make videos abour Angular alsoo... Please 😢
Thanks from Kerala
Nice work! 👍🏼
Explained perfectly. Thank you
thankyou for this useful information really appreciate you for this.
How to get difference between two clock time
Example :-
Let start = 10:30AM
Let end = 11:30AM
Answer: 1 hour
But how through javascript
They are great strategy for specific need, however if u required to do so much of the code splitting on so many components, u might as well go for micro front-end, solve it entirely instead of pieces here and there
Great content! 👏
Thanks for an other amazing video, it would be great if you also add link to in description to related blog on your website. thanks
as always, great video 👍
Most of the apps are not really need "FAST" onboard loading, 1-2 secs is acceptable
Or you can keep landing page simple and fast for SEO, and only open actual app when user click 'Open App'
Huge love from India Kyle :) ❤️
this video... golden!!!!!!
appreciation from the Philippines 🇵🇭 we’re learning a lot
Very useful and clear!
You are incredible thx for the video ❤
Great video. Thank you.
That rhymed well 4:31
Much appreciated video
Learn so many stuff in just 15 mins, thanks a lot.
Incredible 👏
Wow...
Thanks a bunch. This will help a lot.
There's a project that I'm currently working on; after building it up... One of the main js files is about 24mb... How can I optimise it more... It takes a lot of data and time to load from the web server.
Love Suspense, found out about it from @PedroTech’s channel. This is nice to do at a component level when you want parts or the page to be interactive prior to loading an item
If you build everything in a single JS file, what is a dynamic import for you? Is a "dynamic import" but it is not a "dynamic download"... so, the optimization is for the RAM ? ... you download everything in one time for SPA
tnx for your tipe's bro
Excellent, thanks
Very useful tutorial! Thanks
Great tutorial
7:30 There is a option in Chrome to slow down your connection to test this kind of things ;)
Could you make some videos about node.js eventemmiters, the resources for them have always sucked
A nice method I use for simulating a slow connection is to run my React server out of a docker container, but use an Nginx container to proxy there configured to slow down the connection
You can also use the network speed in the browser development tools to slow down network requests
Firefox gives a lot of presets for different speeds
This is really helpful , thank you!
Excellent!
Amazing video, thanks!!
I only ever worry about this once my bundles get bigger then 500kb otherwise, I'd prefer to load data ahead of time for a smoother app experience. If you do this with every component your app will just be loading states everywhere and it doesn't look/feel smooth.
This was really helpful
Something Vue3 has improved. Using "defineAsyncComponent(()=> import(....));
To make it much more apparent what is going on.
@@internet4543 yeah, defineAsyncComponent is a function. Just a generic function wrote in JavaScript.. you import it like any other function.
Unless you wanna say importing a function from a module is not vanilla enough for you.
Can I also recommend some anger management. You seem to have gone from zero to 11 for no reason.
Go back to your Vue world, I guess?
I mean, why do you feel the need to let everyone know there's something improved on Vue 3 specifically? Sure, you probably just wanna share it with everybody here but, again, just go back to your Vue world would be some kind action of you.
Because why, you ask? Honestly speaking tho, we don't care about your shit and just go F urself ok?
@@internet4543 Sorry, I was unaware you were unable to read my first message.. the anger makes sense now. You must feel the world is a scary place when you are unable to understand the simple things that go on around you. Just know we are all here to be friends and no one is laughing at you.
Is the lazy method in your routing example used by the Next.js team when using the component?
Have you ever tried webpack's module federation plugin ?
Great. I use the lazy Suspense in my router too.
But what about error baoundary? How and where to use it?
i have a question...... Can the fallback prop on the Suspense component take a component for example
Why not use default exports? What’s the use case for using named exports?
Thank you
Very helpful
I was wiping my iPad screen during the intro because i thought my screen was dirty then i realize it is just the sweater lol
Sure it speeds things up, however when its fully downloaded on the first go, it should be blazingly fast the next time, right?