Nejnovější verze frameworku Svelte zlepšuje výkon pomocí několika nových funkcí.

S vydáním své nejnovější verze Svelte 4, uznávaný JavaScriptový framework pro vývoj webových aplikací, udělal velký krok vpřed. Tato aktualizace přináší řadu vzrušujících vylepšení s primárním zaměřením na optimalizaci výkonu a vylepšení prostředí pro vývojáře.

Menší a nezávislejší

Jedním z nejpozoruhodnějších vylepšení je podstatné snížení celkové velikosti. Z mohutných 10,6 MB je nyní velikost Svelte mnohem tenčích 2,8 MB, což představuje působivé snížení velikosti o 75 %.

Navíc tým za Úhledný rámec JavaScriptu zefektivnil počet závislostí z 61 na 16. Toto snížení má několik výhod, včetně rychlejšího REPL zážitku, vylepšené interaktivity webové stránky a výrazně rychlejší provádění instalace npm, bez ohledu na správce balíčků preferovat.

Kromě optimalizace velikosti balení Svelte také doladil kód, který generuje pro hydrataci. Například kód pro web SvelteKit je nyní 110,2 kB ze 126,3 kB, což je 13% pokles.

Vylepšené zkušenosti vývojáře

instagram viewer

Svelte nyní ve výchozím nastavení nastavuje přechody na místní, čímž zajišťuje, že ve výchozím nastavení nejsou globální. To minimalizuje riziko interference s jinými přechody a zabraňuje kolizím při načítání stránky, což poskytuje plynulejší uživatelský zážitek.

Webové komponenty

Vytváření webových komponent v Svelte je nyní přímočaré pomocí nového štítek:

"moje součástka" />

I když se tento přístup ukázal jako snadno použitelný v jednoduchých případech, pro pokročilejší představoval omezení scénáře, jako je kontrola, zda se mají aktualizované hodnoty prop odrážet v modelu DOM, nebo deaktivace stínu DOM.

Svelte 4 způsobil revoluci ve vývoji webových komponent zavedením vyhrazeného atributu customElement v štíhlý: možnosti. Tento atribut vám umožňuje konfigurovat webové komponenty s různými možnostmi:

 customElement={{
 štítek: 'vlastní prvek',
 stín: 'žádný',
 rekvizity: {
 název: {
 Odráží aktualizovanou hodnotu zpět do modelu DOM 
 odrážet: skutečný,
 Odráží hodnotu jako číslo 
 typ: 'Číslo',


 Název z atributu 
 atribut: 'element-index'
 }
 }
 }}
/>