𝗟𝗮𝘇𝘆 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁
பெரிய React செயலிகள் பெரிய JavaScript பண்டல்களை (bundles) உருவாக்குகின்றன. பெரிய பண்டல்கள் உங்கள் இணையதளத்தின் வேகத்தைக் குறைக்கின்றன. பயனர்கள் உங்கள் செயலியைப் பயன்படுத்த நீண்ட நேரம் காத்திருக்க வேண்டியிருக்கும். இது உங்கள் பயனர் அனுபவத்தைப் (user experience) பாதிக்கிறது.
Lazy loading இதற்குத் தீர்வாக அமைகிறது. இது பயனர்களுக்குத் தேவைப்படும்போது மட்டுமே கூறுகளை (components) ஏற்றுகிறது. அனைத்தையும் ஒரே நேரத்தில் ஏற்றுவதை நீங்கள் தவிர்க்கலாம்.
Lazy loading-ன் நன்மைகள்:
- சிறிய ஆரம்பக்கட்ட பண்டல் அளவு (initial bundle size)
- வேகமான பக்க ஏற்றம் (page loads)
- சிறந்த பயனர் அனுபவம்
- குறைந்த இணையப் பயன்பாடு (bandwidth use)
- சிறந்த Core Web Vitals
React.lazy() ஐ எவ்வாறு பயன்படுத்துவது?
கூறுகளை (components) டைனமிக் முறையில் இறக்குமதி செய்ய React lazy() என்ற செயல்பாட்டை வழங்குகிறது.
React அந்த கூறினைத் திரையில் காட்டும் போது (renders) மட்டுமே குறியீட்டைப் பதிவிறக்கம் செய்கிறது.
Example code: import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
Lazy components-களுடன் நீங்கள் கண்டிப்பாக Suspense-ஐப் பயன்படுத்த வேண்டும். கூறு ஏற்றப்படும் போது, Suspense ஒரு மாற்றுத் திரையை (fallback UI) காட்டும்.
Example code: import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() { return ( <Suspense fallback={
வெற்றிகரமாகச் செயல்பட இரண்டு விதிகள்:
- உங்கள் கூறுகள் (components) default exports-ஐப் பயன்படுத்த வேண்டும்.
- உங்கள் lazy imports-களை component functions-களுக்கு வெளியே அறிவிக்கவும்.
உங்கள் திட்டங்களில் (projects) நீங்கள் lazy loading பயன்படுத்துகிறீர்களா? கீழே ஒரு கருத்தைப் (comment) பகிருங்கள். நான் உங்களுக்குப் பதிலளிப்பேன்.