Най-новата версия на рамката Svelte подобрява производителността с няколко нови функции.

С пускането на най-новата си версия, Svelte 4, всепризнатата JavaScript рамка за разработка на уеб приложения направи голяма крачка напред. Тази актуализация носи множество вълнуващи подобрения, с основен фокус върху оптимизирането на производителността и подобряването на изживяването на разработчиците.

По-малък и по-независим

Едно от най-забележителните подобрения е значителното намаляване на общия размер. От огромните 10,6 MB, размерът на Svelte сега е много по-тънък от 2,8 MB, впечатляващото намаление на размера със 75%.

Освен това екипът зад Изящна JavaScript рамка рационализира броя на зависимостите от 61 на 16. Това намаление има множество предимства, включително по-бърз REPL опит, подобрена интерактивност уебсайтове и забележително по-бързо изпълнение на npm install, независимо от пакетния мениджър, който предпочитам.

Освен оптимизирането на размера на опаковката, Svelte също е настроил фино кода, който генерира за хидратация. Например, кодът за уебсайта SvelteKit вече е 110,2 kB от 126,3 kB, намаление с 13%.

instagram viewer

Подобрено изживяване за разработчици

Svelte вече задава локални преходи по подразбиране, като гарантира, че те не са глобални по подразбиране. Това минимизира риска от смущения при други преходи и предотвратява сблъсъци по време на зареждане на страницата, осигурявайки по-плавно потребителско изживяване.

Уеб компоненти

Създаването на уеб компоненти в Svelte вече е лесно с помощта на новия таг:

"моят-компонент" />

Въпреки че този подход се оказа лесен за използване в прости случаи, той постави ограничения за по-напредналите сценарии като контролиране дали актуализираните стойности на проп трябва да се отразяват в DOM или деактивиране на сянката DOM.

Svelte 4 революционизира изживяването при създаване на уеб компоненти с въвеждането на специален атрибут customElement в изтънчен: опции. Този атрибут ви позволява да конфигурирате уеб компоненти с различни опции:

 customElement={{
 таг: "персонализиран елемент",
 сянка: 'нито един',
 подпори: {
 име: {
 Отразява актуализираната стойност обратно в DOM 
 отразявам: вярно,
 Отразява стойността като число 
 Тип: "номер",


 Име на атрибута 
 атрибут: 'елемент-индекс'
 }
 }
 }}
/>