Skip to content

config.js nu mai blochează prima vopsire

Vitalie requested to merge 38_config-defer into develop

/config.js are 565 de octeți și era cel mai scump lucru de pe pagină înainte de prima vopsire: cerut ca script obișnuit, oprea construirea paginii până era descărcat și executat. Lighthouse a măsurat 620 ms de randare blocată pe mobil, pentru un fișier pe care nimeni nu îl citește până nu pornește aplicația.

De ce defer singur ar fi stricat magazinul

vite build mută modulul de intrare în <head>, în timp ce eticheta asta rămâne unde e scrisă. Un script clasic amânat și un modul se execută din aceeași coadă, în ordinea documentului — deci sub modul ar fi rulat al doilea, frontend/src/lib/api.ts ar fi citit un window.__RUNTIME_CONFIG__ inexistent, ar fi căzut pe adresa de API din dezvoltare și magazinul s-ar fi randat gol în producție.

Verificat pe dist/index.html, nu presupus: fără mutare, ordinea construită era exact inversă.

<script type="module" crossorigin src="/assets/index-*.js">
<script defer src="/config.js">

Eticheta trece deci în <head>, deasupra modulului. Ordinea construită devine:

<script defer src="/config.js">
<script type="module" crossorigin src="/assets/index-*.js">

Verificare

Că fișierul chiar e citit, nu ocolit. Servit build-ul de producție cu API_URL pus pe o adresă distinctă de cea de rezervă (http://127.0.0.1:3001 față de http://localhost:3001), ca cele două să nu se poată confunda. În browser: window.__RUNTIME_CONFIG__ citit corect, 11 cereri către adresa din config, 0 către adresa de rezervă, pagina randată normal.

Că scriptul de pornire încă funcționează. Rulat în container nginx:alpine, ca în producție: <script defer src="/config.js?v=ef778fd8"> — versiunea se scrie în continuare, defer se păstrează, eticheta rămâne deasupra modulului, preconnect injectat, o singură copie după două rulări.

Că ordinea nu se poate rupe pe tăcute. Patru teste noi în frontend/src/test/runtimeConfigScript.test.ts: eticheta trebuie să poarte defer, să fie în <head> și să apară înaintea modulului. Testul a fost pus la încercare mutând eticheta înapoi în <body> — pică, cu mesajul care spune de ce.

Fișierul de stiluri rămâne blocant, pe drept: e ce previne pagina nestilizată. Nu se atinge aici.

  • frontend: npm run lint, npm run build, npm test — 205 de teste trec
  • backend: npm run build, npm test — 459 de teste trec

Refs #38 (closed)

Merge request reports