Remover código não utilizado

Houssein Djirdeh

Registros como npm têm transformou o mundo JavaScript para melhor, permitindo que qualquer pessoa fazer o download e usar mais de meio milhão de pacotes públicos. Mas muitas vezes incluímos que não estamos usando integralmente. Para corrigir esse problema, analise seu pacote para detectar códigos não utilizados e remover bibliotecas não usadas e desnecessárias.

Impacto nas Core Web Vitals

Ao remover o código não utilizado, você melhora a eficiência do seu site Core Web Vitals. Maior exibição de conteúdo, por exemplo, pode ser afetado por código não utilizado quando recursos desnecessariamente grandes competir por largura de banda com outros recursos. A LCP também pode ser afetada se grandes Recursos JavaScript que renderizam a marcação apenas no cliente conter referências a candidatos à LCP atrasando o carregamento desses recursos.

Códigos não utilizados também podem afetar a Interaction to Next Paint (INP), porque até mesmo JavaScript não utilizado deve ser baixado, analisado, compilado e depois compilado executada. O código não utilizado pode introduzir atrasos desnecessários no carregamento de recursos tempo, uso de memória e atividade da linha de execução principal que contribuem para a má página a capacidade de resposta.

Este guia explica como analisar a base de código do seu projeto em busca de códigos não utilizados e oferece estratégias para a remoção de código não utilizado dos recursos JavaScript aos quais você envia seus usuários na produção.

Analisar seu pacote

O DevTools pode mostrar o 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.

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

Ao especificar uma configuração completa do Lighthouse pela CLI do Node, você pode executar a auditoria "Reduzir o JavaScript não utilizado" para rastrear a quantidade de código não utilizado enviado com seu aplicativo/

.

Se você usar webpack como bundler, Analisador de pacotes Webpack pode ajudar a investigar o que compõe o pacote. Inclua o plug-in na sua arquivo de configurações webpack como qualquer outro plug-in:

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

Embora o webpack seja comumente usado para construir aplicativos de página única, outros bundlers, como Parcel e Rollup, também temos ferramentas de visualização que você pode usar para analisar seu pacote.

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

Essa visualização demonstra quais partes do pacote são maiores que outros. Assim, é possível entender melhor o número e o tamanho das bibliotecas que o aplicativo importa. Isso pode ajudar a identificar se você está usando ou bibliotecas desnecessárias.

Remover bibliotecas não utilizadas

Na imagem anterior do mapa de árvore, há alguns pacotes em um único @firebase. Caso seu site precise apenas do componente de 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';

Para o pacote de aparência misteriosa que você tem certeza de que não está sendo usado em qualquer lugar, dê um passo para trás e veja quais de suas dependências de nível superior são usá-lo. Tente encontrar uma maneira de importar dele apenas os componentes necessários. Se não estiver usando uma biblioteca, remova-a. Se a biblioteca não for necessária para a o carregamento inicial da página, considere usar o carregamento lento reimplantá-lo.

Se você estiver usando o webpack, confira a lista de plug-ins que automaticamente remova códigos não utilizados de bibliotecas conhecidas.

Remover bibliotecas desnecessárias

Nem todas as bibliotecas podem ser divididas em partes e importadas de forma seletiva. Nesses casos, considere se você pode remover a biblioteca completamente. Construir uma solução personalizada ou aproveitar uma alternativa mais leve sempre deve ser que vale a pena considerar. No entanto, é importante pesar a complexidade e o esforço necessário para qualquer uma dessas estratégias antes de remover uma biblioteca completamente do seu app.