ReactJS: Code Splitting Explained

🎓This video you'll learn about code splitting. I explain why it is useful and how to implement it in your app.

Note that this video assumes that you're setup with create-react-app which ships with code splitting out of the box, or you have webpack configured for code splitting.

👍 Like 📢 Subscribe 🔔 Hit The Bell for more content!

[Sajel]

Thanks, Barry, it's a wonderful tutorial
Keep making them

[glauberbispocruzcarvalho]

thanks dude, your tutorial help a lot

[Royale]

I have a couple questions:
1) My understanding is you want packages between 30-150kB... less than 30 ends up being slower than just sending it all at once. How do you check and optimize this aspect. (the bundles seem to just have numbers that don't specify what they're for).
2) I know you can also code split using webpack without using lazy/Suspense at all. What are the advantages/disadvantages of doing it that way, and how do you choose one way over the other?
Thanks!

[cyrax]

i wrapped the Suspense component around the Switch component, inside of it was causing some bugs like matching more the one route after the first match, for exemplo after match /notifications it also would trigger one below called /:slug which should not happen once it matched the one below that by order

[HaNaxHeart]

Hi in 4:45 how did you move it all up ? thanks

[evanfisher]

What does your index script tag look like that's getting the bundles? I can get mine to split but then my script tag isn't correct.