What is Code Splitting? How does Code Splitting Work Under the Hood?

As a developer, you may just worry about the code, but when it reaches your end users as a product, it may mean business to them. No one wants to run their business slow! Loading the application faster and making a quicker page transition are the implicit asks of modern web development.

Code Splitting is a technique that allows you to split a huge application build into smaller chunks and load your page on demand from them. Check out this video to understand how Code Splitting works under the hook. This video is a prerequisite for you to understand concepts like,
- Dynamic Imports
- Lazy Loading
- Suspense

Let's GO 🚀

Timecodes
0:00 - Intro and What to Expect from the Video.
00:51 - What is a bundle and what are bundlers?
05:03 - How a Huge Bundle Affects Application Performance?
07:00 - What is Code Splitting and How it Works?
10:28 - Wrapping Up & What's Next?

## 🤝 My Links:

## 👋 Like my work? Thank You. You can sponsor me from here:

## About Me:
Tapas Adhikary is an Educator, Tech enthusiast, Writer, YouTuber, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the Head of Content at Showwcase. He is a founder of the ReactPlay platform, which is driven by Open Source projects and a fast-growing community.

[salmanbro]

I had the chance to meet you at DefConf last week, and I must say, your speech on full-stack development was fantastic and incredibly helpful! By the way, this video is amazing, bhai. Keep up the great work and keep pushing forward!

[lakshmi]

Started watching your videos. They are very clear and easy to understand. Thank you

[prashlovessamosa]

Thank you sir
These videos are awesome let them coming.

[yashsagar]

I always love your video.. it will give deep understanding about a topic

[benyabw]

Thank you very much. Very clear explanation

[creativeprogrammer]

wow
you are awesome teacher
you explain stuff so so clear
thanks a lot 💖

[Shyam_Mahanta]

Very useful. Here is how it happens for React. the yarn dev in our react app actually does multiple things. First Babel takes all the react code & converts it into js code & gives it to compiler webpack compiles it to the low lvl js code so that browser can understand & it gets saved in our computer ram for faster read & write rather than saving disk. So every time we run a dev server our ram usage increases. The bigger project eats more ram.
I guess I'm correct?