Speed Up Your React Apps With Code Splitting

Подписаться 1,6 млн

Просмотров 367 тыс.

50% 1

FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
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: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 262

@LockeAG4 Год назад

7:53 You can always simulate slow connections via Web Console > Network > throttling > Slow3G

@pearl911 Год назад

I was wondering why he didn't do that also because he's already used it in videos such as ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZVug65gW-fc.html

@Flash136 Год назад

@@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.

@lleytonmorris6305 Год назад

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.

@victormog Год назад

Kyle showed an example of a useful Promise 😉

@Pete133 Год назад

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.

@theyreMineralsMarie Год назад

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.

@gabrielemarino1360 Год назад

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

@mithunkumar-vm5iw Год назад

Like lazy loading in angular?

@jackykwan6534 Год назад

@@gabrielemarino1360 this should be better, let the engine do the job for u

@Cotita Год назад

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.

@theyreMineralsMarie Год назад

@@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.

@kaylee_reed Год назад

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! 💕

@LilAlbus Год назад

The quality of these vids has gone way up over the years man! Well spoken.

@MuhammadAvicena Год назад

I always wait for your content about React JS. Thank you for the knowledge 🙏

@yevhenlysenko7444 Год назад

I watched this lesson 2 month ago, but always try to revise your videos. Thanks!

@thesickandwounded Год назад

Always things i've never heard about before. Great stuff!

@amauryperalta4364 Год назад

I loved this video. I understood way better the concept of code splitting. I can now apply this knowledge, Thank you very much Kile😁

@JosprimaSihombing Год назад

Great video clear explanation and example as usual ⭐

@bernhardsmuts2265 Год назад

Great video as always! Keep it up, you're an essential instructor in the Javascript ecosystem 😎

@AmanSharma-zw1ht Год назад

I was waiting for your new video, hanging around the playlist section .

@xbsidesx Год назад

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!

@xdmemeguy Год назад

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.

@yordanov5.0 6 месяцев назад

Man, you are a true hero! Thank you very very much for the amazing content!

@yadneshkhode3091 Год назад

Please bring more videos related to performance improvement, aria, testing related, logging, debugging issues, improving css loading time etc

@techjourney2754 Год назад

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

@everyonecanbefascist Год назад

Learn so many stuff in just 15 mins, thanks a lot.

@nekromenzer Год назад

Simply WOW , this may super useful when we working on complex applications

@engelshernandez5898 Год назад

Great as always. Thank you, Kyle!

@Andyclanclanclan Год назад

Great video Mr. Simplified. Thank you!

@caiocavalcan Год назад

Nicely done friend. I learn so much from your videos. Thank you.

@user-xg3hl3ni2g Год назад

Good God, finally a valid explanation of this topic. Thanx a lot sir.

@aarona3144 Год назад

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.

@lima91rs Год назад

"multiple smaller bundles" - a.k.a. chunks

@user-gi6yc5nu6g Год назад

3 was really missing! thanks :)

@xbsidesx Год назад

Nice suggestions indeed!

@filipniklas Год назад

Great suggestions!

@rajeshdavide Год назад

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!

@tan2cang93 Год назад

indeed, I always use the way like that,

@likatest7718 8 месяцев назад

If i use default should i adding second paraneter in lazyload function?

@webtech7242 Год назад

Have learned a lot from you bro, ❤️ from Bangladesh

@praveen_sinnur Год назад

Explained perfectly. Thank you

@victormog Год назад

Very useful and clear!

@piyushaggarwal5207 Год назад

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!

@1Chitus Год назад

Great video clear explanation and example as usual

@Lion-mh9rq Год назад

This is really helpful , thank you!

@clarkdnro Год назад

Nice, ive learn something new. Good job

@nhutquangphan4160 Год назад

I don't know why but somehow I can understand your video with my not really good English. Thank you so much mate !😁

@techtalk7671 Год назад

Very useful tutorial! Thanks

@ayushpal9704 7 месяцев назад

Great Explanation Bro

@ravikiranpalaparthi615 Год назад

Informative concept. Thanks

@elton-react-dev Год назад

Amazing video, thanks!!

@maksymkyryliuk492 Год назад

Thanks for this video. Design is very human, easy to use) Thanks ❤

@danielradosa Год назад

Great video, thank you. Splitting stuff into more bits is not just making app faster, but its also good for separation of concerns.

@iamasifimam 10 месяцев назад

thankyou for this useful information really appreciate you for this.

@MatthewWeiler1984 Год назад

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.

@faldinurikhsan5048 Год назад

as always, great video 👍

@atejap Год назад

Another awesome video. Tks.

@alexrusin Год назад

Great video. Thank you.

@joe_xyz Год назад

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.

@lijason3766 Год назад

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.

@nicholasdickrell5118 Год назад

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.

@IAmLesleh Год назад

Just pass the import("whatever.js") to the helper function instead of just the filename, problem solved.

@botchusaimanoj4597 29 дней назад

Thank you so much. i wasted so much time not knowing this.

@botchusaimanoj4597 29 дней назад

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; }); }

@guieltorres Год назад

You are incredible thx for the video ❤

@shadowangel8005 Год назад

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.

@shervangh9660 7 месяцев назад

tnx for your tipe's bro

@mukulsinghbisht2434 Месяц назад

Thats some real advanced knowledge

@labhamjain3915 Год назад

Huge love from India Kyle :) ❤️

@felipecouto9044 Год назад

Great content! 👏

@LordBoltagon Год назад

Nice work! 👍🏼

@dinghanlim7735 Год назад

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

@JoaoPaulo-ox6pr 10 месяцев назад

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.

@solomonowusu-ansah1751 Год назад

This was really helpful

@jeromealtariba7339 Год назад

Excellent, thanks

@abdussametkaradeniz3596 Год назад

this video... golden!!!!!!

@TrishalWalia Год назад

Great tutorial

@pablonavarro2523 2 месяца назад

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 ?

@yusufaltundal3482 Год назад

Incredible 👏

@bulentgercek Год назад

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.

@eyobsamuel8722 Год назад

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.

@ramuramasamy7018 Год назад

By the way, you can also simulate slow internet using your chrome browser by setting the network speed in the developer tools.

@kristijanlazarev 4 месяца назад

Very great video

@sairfan06 Год назад

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

@firewatermoonsun Год назад

Excellent!

@Ram-sc6or 11 месяцев назад

Very helpful

@abdulazizmashrabov6399 Год назад

useful. thanks

@tan2cang93 Год назад

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!

@geforcesong Год назад

excellent stuff

@Salah-YT Год назад

hi, bro why there is no sign-up on ur website? only log in so I'm a new user how to access ur website? thx bro

@NavySturmGewehr Год назад

What's the best way to manage having a significant number of elements? I'm building a react application for myself to do engine ecm editing. The binary is 3.4mb, the json for the parameters is 8mb and there are 17,600 parameters. About 2000 of those are x, xy and xyz tables. Total rendered component count is probably north of 25,000.

@willyhorizont8672 Год назад

Great. I use the lazy Suspense in my router too. But what about error baoundary? How and where to use it?

@paperinflames 11 месяцев назад

Thanks for sharing your knowledge ❤ Please make videos abour Angular alsoo... Please 😢

@cyclelife2.076 Год назад

Thanks from Kerala

@harmez7 Год назад

very very useful

@govinda399 Год назад

You are awesome. Can you make a small code for login and register pages using fetch, that shows conditional component after login/before login? if you have already made such a video, can you provide a link?

@sundersinghaithani7235 Год назад

great video,

@hussainbharmal5998 Год назад

you can also throttle your network from the chrome dev tools

@sob515 Год назад

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.

@valentineedesiriefagene7565 Год назад

Thank you

@free2idol1 Год назад

Thanks!

@WebDevSimplified Год назад

You're welcome!

@johnflavian Год назад

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.

@jasonhan3854 Год назад

Hm.. for some reason I don't see all the folders as you see on your screen, I only get static folder under localhost and inside the static folder, there's only two folders that is `js` and `media` is there a different setting I need to enable to see folders such as 'src' folder?

@Richard_Nixon-mr6rq Год назад

Could you make some videos about node.js eventemmiters, the resources for them have always sucked

@rishiraj2548 Год назад

Thanks a million

@Alessandro-nq3tm Год назад

Have you ever tried webpack's module federation plugin ?

@abdullah5ahmad Год назад

I used this in my proj and had some issues, like sometime some components not working properly or styling is not there . I could not know what's the problem because it's some time just work fine . So i ended up returning to normal import.

@Byte-flow 4 месяца назад

the way you explain >>>>

@germain1984 Год назад

Is the lazy method in your routing example used by the Next.js team when using the component?

@quamzgraphix9826 Год назад

great video

@shawnlee5956 Год назад

Hi. Can we dynamic import npm package like axios and moments? Dynamic import would it affect the server side rendering for SEO? Ie. Dynamic import head meta component at next js, incremental server side rendering? Hope can get your reply. And that for the video, it really simplify many concept

@shadowangel8005 Год назад

you can do incremental rendering ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-o3JWb04DRIs.html

@williamjuang5793 Год назад

A discussion of the pros and cons to this approach vs code splitting through webpack would’ve been nice here. One approach is in code, one is via config. Are these approaches usable together? Seems like from some previous comments that it might not work with webpack

@kollabor8 Год назад

I get lazy loading to work with webpack, some code splitting techniques, don't work as you say

@richardwelsh7901 Год назад

Webpack supports code splitting out of the box. It creates a split chunk every time you use import()

@mustafaebid3800 Год назад

very useful

@FlashLim Год назад

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

@MerrickKing Год назад

Is there a way to code split but still load everything, but to prioritise the order? For example, load the Home page first, but as soon as that's done and showing to the user, start downloading the Store and About pages in the background.

@yadneshkhode3091 Год назад

thats how it is loaded by default i guess not sure

@kaayamarvin6755 Год назад

i have a question...... Can the fallback prop on the Suspense component take a component for example

@fazlechistyhimel3958 Год назад

Love from Bangladesh

@husler7424 Год назад

Do i need to make imports in all files lazy loading? (i.e. passing into the lazy component as a callback) or just import lazily imports of App.js file? Can you please elaborate?

@rafageist Год назад

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