Houve muitas melhorias recentes nas principais ferramentas JS.
Vamos focar aqui apenas nas voltadas a performance nas versões recentes do Angular 16, Next.js 13 e Node.js 20.
Angular 16
Servidor de desenvolvimento baseado no vite
Com a performance muito superior ao Webpack, a ferramenta aproveita duas melhorias feitas recentemente no ecossistema JavaScript: a disponibilidade de ES Modules no navegador e as ferramentas de empacotamento de compilação para nativo, como esbuild.
Teremos uma execução e atualização mais rápida no ng serve ao usar a configuração abaixo ou no angular 16.1 ng serve --force-esbuild
.
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"forceEsbuild": true,
}
},
Hidratação não destrutiva
Já disponível há algum tempo no Next.js, a hidratação no desenvolvimento da Web refere-se ao processo de conversão de conteúdo HTML renderizado do lado do servidor em uma página da Web totalmente interativa e funcional no lado do cliente, anexando comportamento JavaScript e ouvintes de evento. Isso reduz o tempo de interação. Documentação para implementação.
Signals
São uma nova maneira de gerenciar mudanças de estado em aplicativos Angular, inspirados no Solid.js.
É poderoso como o RxJS, mas com uma sintaxe mais simples. As assinaturas são criadas e destruídas automaticamente, então ao contrário do RxJS, não precisamos inscrever e cancelar a inscrição.
Graças ao Signals, podemos usar o Angular sem zone.js, que não possui uma boa performance.
const counter = signal(0);
counter.set(2);
counter.update(count => count + 1);
Testes
Por padrão o Angular sempre utilizou o framework de testes Jasmine com o executor Karma, que utiliza um navegador real. Agora há o suporte experimental para o Jest, que possui execução direta no Node sem usar um navegador real e por isso tem um desempenho melhor. É necessário uma modificação do arquivo angular.json
para substituir o framework de testes para Jest.
{
"projects" : {
"my-app" : {
"architect" : {
"test" : {
"builder" : "@angular-devkit/build-angular:jest" ,
"options" : {
"tsConfig" : " tsconfig.spec.json " ,
"polyfills" : [ "zone.js" , "zone.js/testing" ]
}
}
}
}
}
}
A equipe do Angular ainda vê valor em testes baseados em navegador (como o Jasmine). Foi adicionado o Web Test Runner para substituir o executor de testes Karma, integrado com o Jasmine. Você pode executar ng update
para migrar os testes Karma existentes para o Web Test Runner.
NgOptimizedImage
Do Angular 15, mas inclui por ainda não ser tão conhecido.
Essa diretiva é responsável por implementar as melhores práticas de desempenho ao carregar imagens.
import { NgOptimizedImage } from '@angular/common'
<img ngSrc="cat.jpg">
Observação
Temos visto nas últimas versões do Angular uma buscar em diminuir a curva de aprendizagem e grandes melhorias de performance. Pontos que eram muito mais fortes no React.
Confira também meu artigo sobre componentes autônomos.
Next 13
React Server Components
O Next 13 possui a pasta /app, que diferente da /pages, os componentes dentro dela são React Server Components por padrão.
Combinando a interatividade dos aplicativos do lado do cliente com o desempenho aprimorado da renderização tradicional do servidor.
Os layouts nessa pasta permanecem interativos e não são renderizados novamente ao navegar entre várias páginas. Estável a partir da versão 13.4.
Doc migração pages para app.
Turbopack
A Vercel, mantenedora do Next.js, afirmou que, em aplicativos de grande escala, o Turbopack, escrito em Rust, atualiza 10 vezes mais rápido que o Vite e 700 vezes mais rápido que o Webpack.
Ainda na versão beta, é necessário iniciar o servidor com a flag next dev --turbo
Componente de imagem
Agora o componente usa carregamento lento em vez de hidratação, tornando os tempos de carregamento mais rápidos e envia menos JavaScript do lado do cliente.
import Image from 'next/image'
const Example = () => (
<div className="grid-element">
<Image
src="/example.png"
fill
/>
</div>
)
Otimização de fontes
Otimizará automaticamente suas fontes (incluindo fontes personalizadas) e removerá solicitações de rede externa para melhorar a privacidade e o desempenho.
// pages/index.js
import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'
const inter = Inter({
variable: '--inter-font',
})
/* styles/component.module.css */
.text {
font-family: var(--inter-font);
font-weight: 200;
font-style: italic;
}
Node 20
Atualização da engine V8 para 11.3, parte do Chromium 113, trazendo melhor desempenho e novos recursos de linguagem.
Melhorias no tempo de tempo de execução em URL
, fetch()
e EventTarget
. Além disso, o pacote inclui o lançamento de um analisador de URL de alto desempenho: Ada 2.0, escrito em C++.