Najnowsza wersja frameworka Svelte poprawia wydajność dzięki kilku nowym funkcjom.

Wraz z wydaniem swojej najnowszej wersji, Svelte 4, uznany framework JavaScript do tworzenia aplikacji internetowych zrobił duży krok naprzód. Ta aktualizacja wprowadza wiele ekscytujących ulepszeń, skupiając się przede wszystkim na optymalizacji wydajności i poprawie doświadczenia programistów.

Mniejsze i bardziej niezależne

Jednym z najbardziej godnych uwagi ulepszeń jest znaczne zmniejszenie ogólnego rozmiaru. Z ogromnych 10,6 MB rozmiar Svelte jest teraz znacznie mniejszy 2,8 MB, co oznacza imponujący spadek rozmiaru o 75%.

Ponadto zespół stojący za Zgrabny framework JavaScript usprawnił liczbę zależności z 61 do 16. Ta redukcja ma wiele zalet, w tym szybsze działanie REPL, lepszą interaktywność stron internetowych i znacznie szybsze wykonanie instalacji npm, niezależnie od menedżera pakietów woleć.

Poza optymalizacją rozmiaru opakowania, Svelte dostroił również generowany przez siebie kod do nawodnienia. Na przykład kod strony internetowej SvelteKit ma teraz 110,2 kB z 126,3 kB, co oznacza spadek o 13%.

instagram viewer

Ulepszone środowisko programistyczne

Svelte domyślnie ustawia teraz przejścia na lokalne, zapewniając, że domyślnie nie są one globalne. Minimalizuje to ryzyko interferencji z innymi przejściami i zapobiega kolizjom podczas ładowania strony, zapewniając płynniejsze wrażenia użytkownika.

Komponenty sieciowe

Tworzenie komponentów sieciowych w Svelte jest teraz proste przy użyciu nowego etykietka:

"mój-komponent" />

Chociaż podejście to okazało się łatwe w użyciu w prostych przypadkach, stwarzało ograniczenia dla bardziej zaawansowanych scenariusze, takie jak kontrolowanie, czy zaktualizowane wartości rekwizytów powinny odzwierciedlać się w DOM lub wyłączanie cienia DOM.

Svelte 4 zrewolucjonizował sposób tworzenia komponentów sieciowych, wprowadzając dedykowany atrybut customElement w smukły: opcje. Ten atrybut umożliwia skonfigurowanie składników sieci Web z różnymi opcjami:

 element niestandardowy={{
 etykietka: „element niestandardowy”,
 cień: 'nic',
 rekwizyty: {
 nazwa: {
 Odzwierciedla zaktualizowaną wartość z powrotem do modelu DOM 
 odbijać: PRAWDA,
 Odzwierciedla wartość jako liczbę 
 typ: 'Numer',


 Nazwa of atrybutu 
 atrybut: „indeks elementu”
 }
 }
 }}
/>