React.lazy ஒரு கூறின் JavaScript번들을 on demand (முதல் முறை ரெন்டர் செய்யும்போது மட்டும்) ஏற்றுகிறது. Suspense எந்த lazy (அல்லது data-suspending) குழந்தை இன்னும் ஏற்றிக் கொண்டிருக்கும் போது fallback UI ஐ காட்டுகிறது.
= .( ());
() {
(
);
}
கோட் பிரிவினை இல்லாமல், உலாவி உங்கள் முழு பயன்பாட்டை (கனமான சார்ட் நூலகம் உட்பட) எதையும் காண்பிக்கும் முன் பதிவிறக்கம் செய்கிறது. lazy உடன், Chartன் குறியீடு அதன் சொந்த கோப்பில் பிரிக்கப்பட்டுள்ளது மற்றும் பயனர் உண்மையில் அதை அடையும் போது மட்டுமே பெறப்படுகிறது — ஆரம்ப ஏற்றும் நேரத்தை மேம்படுத்தி Core Web Vitals.
Chart நிறுத்தப்படும் போது (அதன்번들ு தயாரில்லை), React மரத்தின் அந்தப் பகுதியை "நிறுத்தி" அருகிலுள்ள Suspense fallback கட்டுப்படுத்துவதை பதிலாக ரெন்டர் செய்கிறது, பின்னர் அது ஏற்றப்பட்டதும் உண்மையான கூறை மாற்றுகிறது. ஒரு ஒক்கையான கட்டுப்படுத்துவம் பல lazy பிள்ளைகளை மெதுவாக்க மற்றும் ஒரு fallback ஐ காட்ட முடியும்:
<Suspense fallback={<PageSkeleton />}>
<Header />
<LazyFeed />
<LazySidebar />
</Suspense>
Suspense தரவு ஏற்றுவதையும் சமன்வயப்படுத்துகிறது சார்புகள்/நூலகங்களுடன் "நிறுத்துகிற" ஒரு நிலுவைய பெறுகையில், மற்றும் streaming SSR (Next.js App Router) உடன் ஜோடி செய்கிறது வேகமான ஷெல்லை அனுப்பி மெதுவான பகுதிகளை ஸ்ট்ரீம் செய்ய. அளவு மாறுங்களை நன்றாக நிறுவுங்கள் பড்ட்ட, கடினமான தளவமைப்பு மாற்றங்களைத் தவிர்க்க உள்ளடக்கம் உள்ளே வரும் போது.