DEV Community

Cover image for Melhorias de performance recentes no ecossistema JavaScript
Raphael Ramos
Raphael Ramos

Posted on Edited on Originally published at raphaelramos.dev

Melhorias de performance recentes no ecossistema JavaScript

#javascript #frontend #node #braziliandevs

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,
  }
},
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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" ] 
          }
        } 
      } 
    }
  } 
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
)
Enter fullscreen mode Exit fullscreen mode

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',
})
Enter fullscreen mode Exit fullscreen mode 
/* styles/component.module.css */
.text {
  font-family: var(--inter-font);
  font-weight: 200;
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)