Code splitting
Code splitting este o tehnică ce împarte un pachet JavaScript mare în fragmente mai mici încărcate la cerere, astfel încât utilizatorii descarcă doar codul necesar pentru pagina pe care o vizualizează.
Aplicațiile web moderne pot avea milioane de linii de JavaScript. Fără divizarea codului, tot acest cod este împachetat într-un singur fișier pe care fiecare utilizator trebuie să îl descarce înainte ca aplicația să devină interactivă, chiar dacă vizitează o singură pagină. Divizarea codului împarte pachetul aplicației în fragmente mai mici în funcție de rute, componente sau funcționalități.
Când navighează la pagina de setări, acel cod se încarcă la cerere. Bibliotecile folosite doar în funcționalități specifice sunt împărțite în propriile fragmente.
În practică
- Un dashboard SaaS și-a redus bundle-ul inițial de JavaScript de la 3,2 MB la 450 KB prin code splitting bazat pe rute, făcând pagina de autentificare să se încarce în mai puțin de 2 secunde în loc de 8
- Un site de e-commerce a încărcat lazy componenta de recenzii ale produselor (care includea un editor rich-text greu), economisind 200KB din încărcarea inițială a paginii de produs
- O aplicație Next.js împarte automat codul pe rute, astfel încât pagina principală a aplicației lor de 50 de pagini încarcă doar 120KB de JavaScript în loc de totalul de 4MB
- O aplicație web a separat biblioteca de grafice într-un chunk distinct, astfel încât utilizatorii care nu vizitează niciodată panoul de analiză să nu descarce biblioteca de grafice de 500KB
Nu sunteți sigur cum se aplică în cazul dumneavoastră?
Un inginer senior parcurge site-ul dumneavoastră, prezența în căutări și felul în care ajung la dumneavoastră solicitările, apoi notează primele trei lucruri care merită reparate. Păstrați documentul în orice caz.