Code splitting — dastur kodini bitta katta bundle o‘rniga mustaqil yuklanadigan qismlarga ajratish optimallashtirish usulidir. Web ilovada foydalanuvchiga dastlab kerak bo‘lmagan sahifa va funksiyalar keyinroq yuklanadi. Bu boshlang‘ich JavaScript hajmi, parse va execution vaqtini kamaytirib, birinchi foydalanishgacha bo‘lgan vaqtni yaxshilashi mumkin.
Ajratish nuqtalari
Eng tabiiy chegara route hisoblanadi. Foydalanuvchi bosh sahifaga kirganda admin panel yoki murakkab hisobot muharriri kodi yuklanmaydi. Komponent darajasida katta grafik, matn editori yoki modal faqat ochilganda import qilinadi. Kutubxonani vendor chunkka ajratish uning keshini ilova kodidan mustaqil saqlashi mumkin.
const Editor = lazy(() => import('./Editor.js'));
Dynamic import bundler uchun alohida chunk yaratish signalidir. Ish vaqtida modul kerak bo‘lganda tarmoq so‘rovi yuboriladi va promise orqali yuklanadi. Server-side rendering yoki framework bu jarayonni o‘z manifesti orqali boshqarishi mumkin.
Bundle graph
Bundler statik importlar grafigini tahlil qiladi. Dynamic import chegarasi asosiy graphdan alohida chunk chiqaradi. Ikki lazy modul bir dependencydan foydalansa, vosita umumiy chunk yaratishi yoki kodni takrorlashi mumkin. Chunk strategiyasi bundler versiyasi va sozlamasiga bog‘liq.
Juda mayda qismlarga ajratish ko‘plab HTTP so‘rovi, header xarajati va yuklanish ketma-ketligini keltiradi. HTTP/2 parallel oqimlarni yaxshilasa ham, parse va scheduling xarajati qoladi. Chegara foydalanuvchi oqimi va o‘lchov asosida tanlanadi.
Loading holati
Lazy komponent darhol mavjud bo‘lmagani uchun interfeys loading fallback ko‘rsatadi. Skeleton yoki ixcham indikator layout siljishini kamaytiradi. Yuklanish xatosi Error Boundary yoki mos mexanizm bilan ushlanib, qayta urinish imkonini beradi.
Chunk deploydan keyin nomini o‘zgartirsa, eski ochiq sahifa endi mavjud bo‘lmagan faylni so‘rashi mumkin. Server eski artefaktlarni ma’lum muddat saqlashi yoki ilova version mismatchni aniqlab xavfsiz yangilashi kerak. Cache-control va content hash shu hayot davriga moslanadi.
Prefetch va preload
Prefetch brauzer bo‘sh vaqtida keyin kerak bo‘lishi ehtimoli yuqori chunkni past ustuvorlikda oladi. Preload joriy navigatsiya uchun tez orada zarur resursni yuqori ustuvorlikda yuklaydi. Har bir route’ni prefetch qilish code splitting foydasini yo‘qqa chiqarib, mobil trafikni sarflashi mumkin.
Foydalanuvchi havolaga yaqinlashganda yoki viewportga kiritganda ehtimoliy sahifa chunkini olish kontekstli strategiyadir. Network holati va data saver signali hisobga olinadi. Muhim initial kod lazy qilinib, ketma-ket waterfall yaratilmasligi kerak.
CSS va server kodi
JavaScript bilan birga routega tegishli CSS ham ajratilishi mumkin. Komponent yuklanganda stil kechiksa, unstyled content ko‘rinadi; runtime stylesheet tartibi va preload boshqariladi. Serverless platformada funksiyalarni alohida paketlash cold start va deploy hajmiga ta’sir qiladi, bu ham code splittingning server tomondagi ko‘rinishidir.
O‘lchash
Bundle analyzer qaysi modul chunkka kirganini va takrorlangan dependencylarni ko‘rsatadi. Lab o‘lchovidan tashqari real foydalanuvchi LCP, INP, initial transfer va route transition vaqtini kuzatish kerak. Sekin tarmoq va o‘rta quvvatli qurilmada test natijasi kuchli developer kompyuteridan ko‘ra foydaliroq.
Code splitting tree shaking bilan bir xil emas. Tree shaking ishlatilmaydigan eksportni chiqarib tashlaydi; splitting esa qolgan kodni yuklanish vaqtiga ko‘ra bo‘ladi. Ikkalasi birga bundle hajmi va boshlang‘ich xarajatni kamaytiradi.
Bog‘liq tushunchalar
Lazy loading, Dynamic import, Bundler, Tree shaking, Bundle, Prefetch, Web performance