Code Splitting in React JS - Lazy Loading Performance Optimization

#lazyloading #react #ReactJS Our React JS Apps use tools like webpack to efficiently bundle all of our code in a minified format, but this doesn’t always guarantee the optimisation of performance. So in this video, we use something called lazy loading, which is the part of this code splitting process to optimise our cryptocurrency tracker app. 👉 Cryptocurrency Tracker with React JS - https://www.youtube.com/watch?v=QA6oTpMZp84 👩‍💻 Source Code - https://github.com/piyush-eon/react-crypto-tracker/tree/code-splitting-implementation ⭐ Support the channel by becoming member and learn from me one on one - https://www.youtube.com/channel/UCIPZVAwDGa-A4ZJxCBvXRuQ/join 🌎 Live Site - crypto-hunter.netlify.app/ 🔗 MERN Stack Tutorial with Redux - https://www.youtube.com/watch?v=IQXjO0t4XRM&list=PLKhlp2qtUcSYC7EffnHzD-Ws2xG-j3aYo 🔗 React Beginner's Project Tutorials - https://www.youtube.com/playlist?list=PLKhlp2qtUcSa_rX7glmB7HyFsEOEQa0Uk ------------------------------------------------------------------------- 00:00 Intro 01:38 Project Setup 02:35 Lighthouse Performance Report ( Before ) 03:14 What is Code Splitting? 03:59 React.lazy() 04:59 Using Suspense to add fallback UI 06:34 Error Boundaries 11:53 Route Based Code Splitting 14:54 Lighthouse Performance Report ( After ) 15:49 Do this for goodluck ------------------------------------------------------------------------- Special Thanks to our members - Tikorz GamePlace