Code Splitting in React: Load your bundles blazingly fast

Image for post
Image for post
Photo by Lukas from Pexels
Root path: '/home'
About section: '/about'
ContactUs Section: '/contact'
All the above path has to be loaded in different chunks because we will be splitting up the code like that.
// lets create the app my-splitted-app
npx create-react-app my-splitted-app
cd my-splitted-app
npm install && npm start
//that's it your new app is up and running with no charm at all.
Let's wait for a moment to understand the code below:const About = lazy(() => 
import(/* webpackChunkName: "About" */ './Components/About'));
1. The import is called as a function to dynamically import a module. When it is used this way, it returns a promise.2. /* webpackChunkName: "About" */ is used to specify the name of the chunk or else it will be default numbered from 0 to number of lazy loaded components.
Code Splitting in action

I am a fullStack developer building things at BigBinary using Ruby on Rails and React.js .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store