Remover código não utilizado

O npm facilita muito a adição de código ao seu projeto. Mas você está mesmo usando todos esses bytes extras?

Registros como o npm transformaram o mundo do JavaScript para melhor, permitindo que qualquer pessoa faça o download e use facilmente mais de meio milhão de pacotes públicos. Mas costumamos incluir bibliotecas que não estamos utilizando totalmente. Para corrigir esse problema, analise seu pacote para detectar códigos não utilizados. Em seguida, remova as bibliotecas não usadas e desnecessárias.

Impacto nas Core Web Vitals

Ao remover códigos não utilizados, você pode melhorar as Core Web Vitals do seu site. A Maior exibição de conteúdo, por exemplo, pode ser afetada por código não utilizado pelo aumento da contenção de largura de banda causada por recursos maiores que o necessário. A LCP também poderá ser afetada se recursos JavaScript grandes que renderizam marcação exclusivamente no cliente contêm referências a candidatos a LCP, atrasando o carregamento desses recursos.

Outras métricas, como Latência na primeira entrada (FID, na sigla em inglês) e Interação com a próxima exibição (INP, na sigla em inglês) também podem ser afetadas pelo código não utilizado, porque até mesmo JavaScript não utilizado precisa ser transferido por download, analisado, compilado e executado. O código não utilizado pode gerar atrasos desnecessários no tempo de carregamento de recursos, no uso de memória e na atividade da linha de execução principal, o que prejudica a capacidade de resposta da página.

Este guia vai ajudar você a entender o código não utilizado do projeto, mostrando como analisar a base de código dele e oferecer estratégias para remover códigos não utilizados dos recursos JavaScript que você envia aos usuários na produção.

Analisar seu pacote

O DevTools facilita a visualização do tamanho de todas as solicitações de rede:

  1. Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
  2. Clique na guia Rede.
  3. Marque a caixa de seleção Desativar cache.
  4. Recarregue a página.

Painel "Rede" com solicitação de pacote

A guia Cobertura no DevTools também informa quanto código CSS e JS no seu aplicativo não é usado.

Cobertura de código no DevTools

Ao especificar uma configuração completa do Lighthouse por meio da CLI do Node, uma auditoria "JavaScript não usado" também pode ser usada para rastrear quanto código não utilizado está sendo enviado com seu aplicativo.

Auditoria JS não usada do Lighthouse

Se você estiver usando o webpack como seu bundler, o Webpack Bundle Analyzer ajudará a investigar o que compõe o pacote. Inclua o plug-in no arquivo de configurações do webpack como qualquer outro plug-in:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

Embora o webpack seja comumente usado para criar aplicativos de página única, outros bundlers, como Parcel e Rollup, também têm ferramentas de visualização que podem ser usadas para analisar seu pacote.

Recarregar o aplicativo com esse plug-in incluído mostra um mapa de árvore com zoom de todo o pacote.

Analisador de pacotes do Webpack

Com essa visualização, é possível inspecionar quais partes do pacote são maiores que outras, bem como ter uma ideia melhor de todas as bibliotecas que você está importando. Isso pode ajudar a identificar se você está usando bibliotecas não utilizadas ou desnecessárias.

Remover bibliotecas não utilizadas

Na imagem do mapa de árvore anterior, há alguns pacotes em um único domínio @firebase. Se o site precisar apenas do componente do banco de dados do Firebase, atualize as importações para buscar essa biblioteca:

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

É importante ressaltar que esse processo é significativamente mais complexo para aplicativos maiores.

Para o pacote de aparência misteriosa que você tem certeza de que não está sendo usado em lugar nenhum, dê um passo para trás e veja quais de suas dependências de nível superior o estão usando. Tente encontrar uma maneira de importar apenas os componentes necessários. Se você não estiver usando uma biblioteca, remova-a. Se a biblioteca não for necessária para o carregamento inicial da página, verifique se ela pode ser carregada lentamente.

E caso você esteja usando o webpack, confira a lista de plug-ins que removem automaticamente o código não utilizado de bibliotecas conhecidas.

Remover bibliotecas desnecessárias

Nem todas as bibliotecas podem ser facilmente divididas em partes e importadas de forma seletiva. Nesses cenários, considere se a biblioteca pode ser removida completamente. Criar uma solução personalizada ou usar uma alternativa mais leve sempre devem ser opções a serem consideradas. No entanto, é importante ponderar a complexidade e o esforço necessários para qualquer um desses esforços antes de remover uma biblioteca totalmente de um aplicativo.