Code Splitting in React JS - Lazy Loading Performance Optimization
85.4 هزار بار بازدید -
3 سال پیش
-
#lazyloading
#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 -
Cryptocurrency Tracker with React JS,...
👩💻 Source Code -
https://github.com/piyush-eon/react-c...
⭐ Support the channel by becoming member and learn from me one on one -
@roadsidecoder
🌎 Live Site -
crypto-hunter.netlify.app/
🔗 MERN Stack Tutorial with Redux -
MERN Stack Project Tutorial with Redu...
🔗 React Beginner's Project Tutorials -
React JS Project Tutorials 🔥🔥
-------------------------------------------------------------------------
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
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 -
Cryptocurrency Tracker with React JS,...
👩💻 Source Code -
https://github.com/piyush-eon/react-c...
⭐ Support the channel by becoming member and learn from me one on one -
@roadsidecoder
🌎 Live Site -
crypto-hunter.netlify.app/
🔗 MERN Stack Tutorial with Redux -
MERN Stack Project Tutorial with Redu...
🔗 React Beginner's Project Tutorials -
React JS Project Tutorials 🔥🔥
-------------------------------------------------------------------------
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
3 سال پیش
در تاریخ 1400/10/12 منتشر شده
است.
85,431
بـار بازدید شده