Skip to content

Încarcă doar limba pe care o citește vizitatorul

Vitalie requested to merge 34_locale-chunks into main

Desprins din #21 (closed). Pachetul de intrare ducea traducerile pentru toate cele trei limbi, înregistrate de două ori — o dată pentru instanța magazinului, o dată pentru cea a panoului. Fiecare vizitator descărca și interpreta 198 kB de traduceri ca să citească vreo 70 kB.

Ce s-a schimbat

Pachetul de intrare: 439.529 → 267.392 de octeți (−39,2 %). Fiecare limbă e acum un chunk propriu, adus printr-un modul de backend i18next scris de mână, zece linii, fără dependență nouă.

fallbackLng e limba activă, nu engleza: o rezervă în altă limbă ar face i18next să tragă un al doilea chunk la fiecare încărcare, adică exact descărcarea pe care o eliminăm. Nu se pierde nimic — fiecare cheie din en există și în ro, și în ru, iar frontend/src/test/localeParity.test.ts ține lucrul acesta pe loc. Fără rezervă între limbi, o cheie lipsă s-ar vedea ca text brut pe o pagină live.

Adresa unui chunk nu se poate ști până când pachetul de intrare nu e descărcat și rulat, ceea ce ar muta traducerile în spatele primei vopsiri în loc de lângă ea. Build-ul scrie dist/locale-chunks.json, iar randarea din backend emite modulepreload pentru limba din adresă.

Detectorul de limbă a plecat odată cu schimbarea, și pachetul i18next-browser-languagedetector cu el. Adresa e singura autoritate pentru limbă de când există prefixele, iar main.tsx suprascria oricum ce rezolva detectorul, la fiecare încărcare; păstrat acum, ar fi rezolvat o limbă, i-ar fi încărcat chunk-ul, și ar fi fost suprascris o linie mai jos.

Verificat

Local, pe build-ul real servit printr-un nginx de mână, backend-ul de randare în spate:

  • chunk-ul limbii pornește la aceeași milisecundă cu pachetul de intrare (16 ms / 16 ms) și e cerut o singură dată — deci crossorigin se potrivește cu cererea de mai târziu, nu se descarcă de două ori;
  • / → chunk ro, /ru/…ru, /en/…en, pe pagină de start, de produs și de colecție;
  • toate trei limbile în browser, plus comutarea din switcher și panoul de administrare — fără chei brute, fără erori în consolă;
  • build vechi + backend nou: /locale-chunks.json dă 404, pagina se randează normal. Cele două imagini pot pleca în orice ordine.

Lighthouse 13.4.1, mobil, aceleași condiții pentru ambele build-uri:

înainte după
FCP 4.270 ms 3.773 ms
LCP 8.845 ms 7.889 ms
fir principal 1.257 ms 1.010 ms
evaluare de script 294 ms 230 ms

Verificări: tsc --noEmit -p tsconfig.app.json curat, oxlint cu singurul avertisment preexistent din src/App.tsx:69, frontend 207 teste în 26 de fișiere, backend build curat și 471 de teste în 31 de fișiere.

Part of #34 (closed)

Merge request reports