A versão mais recente da estrutura Svelte melhora o desempenho com vários novos recursos.

Com o lançamento de sua versão mais recente, Svelte 4, a aclamada estrutura JavaScript para desenvolvimento de aplicativos da Web deu um grande passo à frente. Esta atualização traz uma série de melhorias emocionantes, com foco principal em otimizar o desempenho e aprimorar a experiência do desenvolvedor.

Menor e mais independente

Uma das melhorias mais notáveis ​​é a redução substancial no tamanho total. De robustos 10,6 MB, o tamanho do Svelte agora é muito mais fino de 2,8 MB, uma redução impressionante de 75% no tamanho.

Além disso, a equipe por trás do Estrutura JavaScript elegante simplificou o número de dependências de 61 para 16. Essa redução tem várias vantagens, incluindo uma experiência REPL mais rápida, interatividade aprimorada em sites e execução notavelmente mais rápida da instalação do npm, independentemente do gerenciador de pacotes que você preferir.

Além da otimização do tamanho da embalagem, o Svelte também ajustou o código que gera para hidratação. Por exemplo, o código do site SvelteKit agora tem 110,2 kB de 126,3 kB, uma redução de 13%.

instagram viewer

Experiência Aprimorada do Desenvolvedor

Svelte agora define as transições como locais por padrão, garantindo que elas não sejam globais por padrão. Isso minimiza o risco de interferência com outras transições e evita colisões durante o carregamento da página, proporcionando uma experiência de usuário mais suave.

Componentes Web

A criação de Web Components no Svelte agora é simples usando o novo marcação:

"meu-componente" />

Embora essa abordagem tenha se mostrado fácil de usar em casos simples, ela apresentou limitações para métodos mais avançados. cenários como controlar se os valores prop atualizados devem refletir no DOM ou desabilitar a sombra DOM.

O Svelte 4 revolucionou a experiência de criação de Web Components com a introdução de um atributo customElement dedicado em esbelto: opções. Este atributo permite configurar Web Components com várias opções:

 customElement={{
 marcação: 'elemento personalizado',
 sombra: 'nenhum',
 adereços: {
 nome: {
 Reflete o valor atualizado de volta para o DOM 
 refletir: verdadeiro,
 Reflete o valor como um número 
 tipo: 'Número',


 Nome do do atributo 
 atributo: 'índice de elemento'
 }
 }
 }}
/>