Cea mai nouă versiune a cadrului Svelte îmbunătățește performanța cu câteva funcții noi.

Odată cu lansarea celei mai recente versiuni, Svelte 4, apreciatul cadru JavaScript pentru dezvoltarea de aplicații web a făcut un pas important înainte. Această actualizare aduce o serie de îmbunătățiri palpitante, cu un accent principal pe optimizarea performanței și îmbunătățirea experienței dezvoltatorului.

Mai mic și mai independent

Una dintre cele mai remarcabile îmbunătățiri este reducerea substanțială a dimensiunii totale. De la 10,6 MB, dimensiunea lui Svelte este acum mult mai subțire de 2,8 MB, o scădere impresionantă de 75% a dimensiunii.

În plus, echipa din spatele Cadru JavaScript svelt a simplificat numărul de dependențe de la 61 la 16. Această reducere are multiple avantaje, inclusiv o experiență REPL mai rapidă, interactivitate îmbunătățită site-uri web și execuția remarcabil mai rapidă a instalării npm, indiferent de managerul de pachete pe care îl aveți prefera.

Dincolo de optimizarea dimensiunii pachetului, Svelte a ajustat și codul pe care îl generează pentru hidratare. De exemplu, codul pentru site-ul web SvelteKit este acum de 110,2 kB de la 126,3 kB, o scădere cu 13%.

instagram viewer

Experiență îmbunătățită a dezvoltatorului

Svelte setează acum tranzițiile la local în mod implicit, asigurându-se că nu sunt globale în mod implicit. Acest lucru minimizează riscul de interferență cu alte tranziții și previne coliziunile în timpul încărcării paginii, oferind o experiență mai fluidă pentru utilizator.

Componente Web

Crearea componentelor web în Svelte este acum simplă folosind noul etichetă:

"componenta mea" />

Deși această abordare s-a dovedit ușor de utilizat în cazuri simple, ea a impus limitări pentru cele mai avansate scenarii precum controlul dacă valorile actualizate de prop ar trebui să se reflecte în DOM sau dezactivarea umbrei DOM.

Svelte 4 a revoluționat experiența de creație a componentelor web prin introducerea unui atribut customElement dedicat în svelte: opțiuni. Acest atribut vă permite să configurați componente web cu diferite opțiuni:

 customElement={{
 etichetă: „element personalizat”,
 umbră: 'nici unul',
 recuzită: {
 Nume: {
 Reflectează valoarea actualizată înapoi în DOM 
 Reflectați: Adevărat,
 Reflectă valoarea ca un număr 
 tip: 'Număr',


 Numele al atributului 
 atribut: „indice-element”
 }
 }
 }}
/>