Melhorias de performance recentes no ecossistema JavaScript

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++.