React ನಲ್ಲಿ Lazy Loading
ದೊಡ್ಡ React ಅಪ್ಲಿಕೇಶನ್ಗಳು ದೊಡ್ಡ JavaScript ಬಂಡಲ್ಗಳನ್ನು (bundles) ಸೃಷ್ಟಿಸುತ್ತವೆ. ದೊಡ್ಡ ಬಂಡಲ್ಗಳು ನಿಮ್ಮ ಸೈಟ್ನ ವೇಗವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತವೆ. ಬಳಕೆದಾರರು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬಳಸಲು ಹೆಚ್ಚು ಸಮಯ ಕಾಯಬೇಕಾಗುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು (user experience) ಹಾನಿಗೊಳಿಸುತ್ತದೆ.
Lazy loading ಇದನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಘಟಕಗಳನ್ನು (components) ಲೋಡ್ ಮಾಡುತ್ತದೆ. ನೀವು ಎಲ್ಲವನ್ನೂ ಏಕಕಾಲದಲ್ಲಿ ಲೋಡ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತೀರಿ.
Lazy loading ನ ಪ್ರಯೋಜನಗಳು:
- ಸಣ್ಣ ಆರಂಭಿಕ ಬಂಡಲ್ ಗಾತ್ರ (Smaller initial bundle size)
- ವೇಗವಾದ ಪೇಜ್ ಲೋಡ್ಗಳು
- ಉತ್ತಮ ಬಳಕೆದಾರರ ಅನುಭವ
- ಕಡಿಮೆ ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ಬಳಕೆ
- ಉತ್ತಮ Core Web Vitals
React.lazy() ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು
ಘಟಕಗಳನ್ನು (components) ಡೈನಾಮಿಕ್ ಆಗಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲು React lazy() ಎಂಬ ಫಂಕ್ಷನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
React ಘಟಕವನ್ನು ರেন্ডರ್ ಮಾಡುವಾಗ ಮಾತ್ರ ಕೋಡ್ ಅನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡುತ್ತದೆ.
ಉದಾಹರಣೆ ಕೋಡ್: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
ನೀವು lazy components ಗಳೊಂದಿಗೆ Suspense ಅನ್ನು ಬಳಸಲೇಬೇಕು. ಘಟಕ ಲೋಡ್ ಆಗುವಾಗ Suspense ಒಂದು fallback UI ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ ಕೋಡ್: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
ಯಶಸ್ಸಿಗೆ ಎರಡು ನಿಯಮಗಳು:
- ನಿಮ್ಮ ಘಟಕಗಳು (components) default exports ಅನ್ನು ಬಳಸಬೇಕು.
- ನಿಮ್ಮ lazy imports ಗಳನ್ನು ನಿಮ್ಮ component ಫಂಕ್ಷನ್ಗಳ ಹೊರಗೆ ಘೋಷಿಸಿ.
ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ lazy loading ಬಳಸುತ್ತೀರಾ? ಕೆಳಗೆ ಕಾಮೆಂಟ್ ಮಾಡಿ. ನಾನು ನಿಮಗೆ ಉತ್ತರಿಸುತ್ತೇನೆ.