Speed Up Your React Apps With Code Splitting

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:

🌎 Find Me Here:

⏱️ 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

[LockeAG]

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

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

[LilAlbus]

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

[Amine-yxvc]

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

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

[aarona]

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.

[ahmad]

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.

[balajiganesh]

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

[yadneshkhode]

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

[yevhenlysenko]

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

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

[GevKerobyan]

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

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

[yordanov.]

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

[nekromenzer]

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

[MuhammadAvicena]

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

[thesickandwounded]

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

[piyushaggarwal]

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!

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

[gabruCoder]

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