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

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

Меньше и более независимым

Одним из наиболее примечательных улучшений является существенное уменьшение общего размера. С огромных 10,6 МБ размер Svelte теперь намного меньше — 2,8 МБ, что составляет впечатляющее уменьшение размера на 75%.

Кроме того, команда, стоящая за Svelte JavaScript-фреймворк упростил количество зависимостей с 61 до 16. Это сокращение имеет множество преимуществ, в том числе более быстрый опыт REPL, улучшенную интерактивность на веб-сайты и значительно более быстрое выполнение установки npm, независимо от используемого менеджера пакетов. предпочитать.

Помимо оптимизации размера пакета, Svelte также точно настроил код, который он генерирует для гидратации. Например, код для веб-сайта SvelteKit теперь составляет 110,2 КБ с 126,3 КБ, что на 13% меньше.

instagram viewer

Расширенный опыт разработчиков

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

Веб-компоненты

Создавать веб-компоненты в Svelte теперь просто с помощью нового ярлык:

"мой компонент" />

Хотя этот подход оказался простым в использовании в простых случаях, он наложил ограничения на более сложные задачи. сценарии, такие как контроль того, должны ли обновленные значения реквизита отражаться в DOM или отключение тени ДОМ.

Svelte 4 произвел революцию в разработке веб-компонентов, представив специальный атрибут customElement в стройный: варианты. Этот атрибут позволяет настраивать веб-компоненты с различными параметрами:

 пользовательскийЭлемент={{
 ярлык: 'пользовательский элемент',
 тень: 'никто',
 реквизит: {
 имя: {
 Отражает обновленное значение обратно в DOM 
 отражать: истинный,
 Отражает значение в виде числа 
 тип: 'Число',


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