Code Splitting React Router Routes with React Lazy and React Suspense

I've been working on a side project lately and I've become more and more interested in performance, and one of the basic things that I wanted to show from what I've learnt is how to split React Router Routes using React Lazy and React Suspense. Now, this is a fairly easy thing to do to get good performance and smaller bundle sizes (whether you're using create-react-app or a custom Webpack config). Code splitting your routes means you don't load every page on the homepage of your application--which can reduce your bundle size drastically, so it's an easy win for performance.

--

🎣 react suspense,react suspense lazy,react suspense api,react lazy,react lazy loading,react router dom v5,react router dom v5 tutorial,react router,react router tutorial,react router dom,react for beginners 2020,react tutorial for beginners 2020,react tutorial 2020,react tutorial,react tutorials uk,code splitting react,react code splitting,react code splitting tutorial,react tutorial project,reactjs for beginners,reactjs tutorial for beginners 2020

[dave_m]

I am so happy that I found this channel 😭 thank you fcc

[amarkoulavkar]

Thanks for sharing information. Can you please share Github repo of the above sample project

[amirnoorani]

Hey Karl thanks for sharing everything in your videos! I didn't get you why you are not using NEXTJs? it's a big topic and many people like me wondering why you are not using next. thanks

[BrunoWinck]

"I do like webpack, surprisingly", such a non surprising opinion :)

[mirozxl]

hey love your videos. I got into styled components from watching your videos. Can you do a quick tutorial on using theme and breakpoints that can scale in a project