Skip to content

Para Além da Rapidez

ViteConf 2023

Assistir a repetição!

A Vite 4.0 foi Publicada!

9 de Dezembro de 2022 - Consultar o anúncio da Vite 5.0

A Vite 3 foi lançada a cinco meses atrás. Os descarregamentos do npm por semana foram de 1 milhão para 2.5 milhões desde então. O ecossistema também amadureceu, e contínua a crescer. No levantamento da Jamstack Conf deste ano, o uso entre a comunidade saltou de 14% para 32% enquanto mantêm uma alta pontuação de satisfação de 9.7. Nós vimos os lançamentos estáveis da Astro 1.0, Nuxt 3, e outras abstrações alimentadas pela Vite que estão a inovar e colaborar: SvelteKit, Solid Start, Qwik City. A Storybook anunciou o suporte de primeira classe para Vite como uma de suas principais funcionalidades para a Storybook 7.0. A Deno agora suporta a Vite. A adoção da Vitest está explodindo, que representará em breve metade dos descarregamentos de npm da Vite. A Nx também está investindo no ecossistema, e suporta oficialmente a Vite.

Ecossistema da Vite 4

De acordo com um mostruário do crescimento que a Vite e os projetos relacionados têm experimentado, o ecossistema da Vite reuniu em 11 Outubro na ViteConf 2022. Nós vimos representantes das principais abstrações e ferramentas de web a contarem histórias de inovação e colaboração. E em um movimento simbólico, a equipa da Rollup escolheu aquele exato dia para lançar a Rollup 3.

Hoje, a equipa da Vite com a ajuda dos nossos parceiros do ecossistema, tem o prazer em anunciar o lançamento da Vite 4, alimentada durante momento da construção pela Rollup 3. Temos trabalhado com o ecossistema para garantir um caminho de atualização suave para esta nova versão principal. A Vite agora está a usar a Rollup 3, o que permitiu-nos simplificar a manipulação de recurso interno da Vite e tem muitas melhorias. Consulte as notas de lançamento da Rollup 3.

Imagem de Capa do Anúncio da Vite 4

Ligações rápidas:

Documentação em outros idiomas:

Se começaste a usar a Vite recentemente, sugerimos a leitura do Guia do Porquê da Vite e consultar o Começo e guia de Funcionalidades. Se quiseres envolver-te, contribuições são bem-vindas na GitHub. Quase 700 colaboradores têm contribuído com a Vite. Siga as atualizações na Twitter e Mastodon, ou colabore com os outros na nossa comunidade da Discord.

Começar a brincar com a Vite 4

Use pnpm create vite para estruturar um projeto de Vite com a tua abstração preferida, ou abra um modelo de projeto de ponto de partida online para brincar com a Vite 4 usando a vite.new.

Tu podes também executar pnpm create vite-extra para ter acesso aos modelos de projeto de outras abstrações e executores (Solid, Deno, SSR, e biblioteca para começar). Os modelos de projeto de create vite-extra também estão disponíveis quando executas create vite sob a opção Others.

Nota que os modelos de projeto de ponto de partida da Vite estão destinados a serem usados como uma zona de experimentos para testar a Vite com diferentes abstrações. Quando estiveres a construir o teu próximo projeto, recomendamos consultar os pontos de partida recomendados por cada abstração. Algumas abstrações agora também redirecionam create vite para os seus pontos de partida (create-vue e Nuxt 3 para a Vue, e SvelteKit para a Svelte).

Nova extensão de React usando a SWC durante o desenvolvimento

A SWC é agora uma substituição madura para a Babel, especialmente no contexto dos projetos de React. A implementação da Atualização Rápida de React da SWC é muito mais rápida do que a de Babel, e para alguns projetos, é agora uma alternativa melhor. A partir da Vite 4, duas extensões estão disponíveis para os projetos de React com diferentes compromissos. Nós acreditamos que ambas abordagens são dignas de serem suportadas, e continuaremos a explorar melhorias para ambas as extensões no futuro.

@vitejs/plugin-react

A @vitejs/plugin-react é uma extensão que usa a esbuild e a Babel, alcançando HMR rápida com uma pegada de pacote pequena e a flexibilidade de ser capaz de usar a conduta de transformação da Babel.

@vitejs/plugin-react-swc (new)

A @vitejs/plugin-react-swc é a nova extensão que usa a esbuild durante a construção, mas substitui a Babel pela SWC durante o desenvolvimento. Para projetos grandes que não exigem extensões de React não padronizadas, inicialização fria e a Substituição de Módulo Instantânea (HMR, sigla em Inglês) podem ser significativamente mais rápidos.

Compatibilidade do Navegador

A construção do navegador moderno agora aponta para safari14 por padrão para compatibilidade de ES2020 mais ampla. Isto significa que as construções modernas podem agora usar BigInt e que a aglutinação de operador nulo já não é traduzida. Se precisas de suportar navegadores mais antigos, podes adicionar a @vitejs/plugin-legacy como de costume.

Importando CSS como uma Sequência de Caracteres

Na Vite 3, importar a exportação padrão de um ficheiro .css poderia introduzir um duplo carregamento de CSS.

ts
import cssString from './global.css'

Este carregamento duplo poderia ocorrer já que um ficheiro .css será emitido e é provável que a sequência de caracteres de CSS será também usada pelo código da aplicação — por exemplo, injetado pela execução da abstração. Desde a Vite 4, a exportação padrão de .css tem sido depreciada. O modificador de sufixo de consulta ?inline precisa ser usado neste caso, já que este não emite os estilos de .css importados.

ts
import stuff from './global.css?inline'

Aprenda mais no Guia de Migração.

Variáveis de Ambiente

Agora a Vite usa dotenv 16 e dotenv-expand 9 (anteriormente usava dotenv 14 e dotenv-expand 5). Se tens um valor que inclui # ou `, precisarás envolvê-los com aspas.

diff
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"

Para mais detalhes, consulta a dotenv e a dotenv-expand changelog.

Outras Funcionalidades

  • Atalhos da Interface da Linha de Comando (pressione h durante o desenvolvimento para vê-los a todos) (#11228)
  • Suporte para pacote de remendo quando estiveres a pré-empacotar as dependências (#10286)
  • Limpador da saída de registos de construção (#10895) e interruptor para KB para alinhar com as ferramentas de programação do navegador (#10982)
  • Mensagens de erros melhoradas durante a SSR (#11156)

Tamanho de Pacote Reduzido

A Vite cuida da sua pegada, para acelerar a instalação, especialmente no caso de uso de zonas de experimentos para documentação e reproduções. E uma vez mais, esta versão principal trás melhorias no tamanho do pacote da Vite. O tamanho da instalação da Vite 4 é 23% mais pequena comparada ao da Vite 3.2.5 (14.1 MB vs 18.3 MB).

Atualizações para Núcleo da Vite

O Núcleo da Vite e a vite-ecosystem-ci continuam a evoluir para fornecer uma experiência melhor para os responsáveis e colaboradores e garantir que desenvolvimento da Vite escale até lidar com o crescimento no ecossistema.

Extensões de Abstração fora do Núcleo

@vitejs/plugin-vue e @vitejs/plugin-react têm feito parte do mono-repositório do núcleo da Vite desde as primeiras versões da Vite. Isto ajudou-nos receber um laço de reações detalhadas quando fazíamos mudanças enquanto tínhamos tanto o Núcleo e as extensões testadas e lançadas juntas. Com a vite-ecosystem-ci podemos receber estas reações com estas extensões desenvolvidas em repositórios independentes, então desde a Vite 4, eles têm sido movidas para fora do mono-repositório do núcleo da Vite. Isto é significativo para a história agnóstica de abstração da Vite e permitirá construir equipas independentes para manter cada uma das extensões. Se tiveres bugs para reportar ou funcionalidades à pedir, crie as questões nos novos repositórios fazendo-os avançar: vitejs/vite-plugin-vue e vitejs/vite-plugin-react.

Melhorias na vite-ecosystem-ci

A vite-ecosystem-ci estende a integração contínua da Vite fornecendo relatórios de estado sobre demanda a respeito do estado das integrações contínuas das os principais projetos a favor da corrente. Nós executamos a vite-ecosystem-ci três vezes por semana contara o ramo principal da Vite e recebemos relatórios oportunos antes da introdução de uma regressão. A Vite 4 em breve será compatível com a maioria dos projetos usando a Vite, os quais já preparam ramos com as mudanças necessárias e serão os lançarão nos próximos dias. Nós também somos capazes de executar a vite-ecosystem-ci sobre demanda nos pedidos de atualização do repositório usando o /ecosystem-ci run em um comentário, permitindo-nos saber os efeitos das mudanças antes de atirem o ramo principal.

Agradecimentos

A Vite 4 não seria possível sem as incontáveis horas de trabalho dos colaboradores da Vite, muitos deles responsáveis de projetos e extensões a favor da corrente, e os esforços da Equipa da Vite. Todos temos trabalhado juntos para melhorar a Experiência de Programação da Vite mais uma vez, para todas abstrações e aplicações usá-la. Somos gratos por sermos capazes de melhorar uma base comum para um ecossistema tão dinâmico.

We're also thankful to individuals and companies sponsoring the Vite team, and companies investing directly in Vite's future: @antfu7's work on Vite and the ecosystem is part of his job at Nuxt Labs, Astro is funding @bluwyoo's' Vite core work, and StackBlitz hires @patak_dev to work full time on Vite.

Próximos Passos

Nosso foco imediato estaria sobre a triagem das questões abertas recentemente para evitar a interrupção por possíveis regressões. Se gostarias de envolver-te e ajudar-nos a melhorar a Vite, sugerimos começar com a triagem de problemas. Junta-te à nossa Discord e contacte-nos na canal #contributing. Polir a história da nossa #docs, e ajudar os outros no #help. Nós precisamos continuar a construir uma comunidade prestável e acolhedora para próxima onde de utilizadores, a medida que a adoção da Vite continua a crescer.

Existem muita frentes abertas para continuar a melhorar a Experiência de Programação de todos que escolheram a Vite para alimentar as suas abstrações e programar suas aplicações. Para diante!

Lançada sob a Licença MIT. (197930d3)