Registros como o npm transformaram o mundo do JavaScript para melhor, permitindo que qualquer pessoa faça o download e use mais de meio milhão de pacotes públicos. Mas costumamos incluir bibliotecas que não usamos totalmente. Para corrigir esse problema, analise seu pacote para detectar códigos não utilizados e remova bibliotecas não usadas e desnecessárias.
Impacto nas Core Web Vitals
Ao remover o código não utilizado, 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 quando recursos desnecessariamente grandes concorrem por largura de banda com outros recursos. A LCP também pode ser afetada se grandes recursos JavaScript que renderizam marcação apenas no cliente contêm referências a candidatos a LCP atrasando o carregamento desses recursos.
O código não utilizado também pode afetar a Interaction to Next Paint (INP), porque até mesmo o JavaScript não utilizado precisa ser transferido por download, analisado, compilado e executado. O código não utilizado pode introduzir 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 explica como analisar códigos não utilizados do seu projeto e oferece 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 pode mostrar o tamanho de todas as solicitações de rede:
- Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
- Clique na guia Rede.
- Marque a caixa de seleção Desativar cache.
- Recarregue a página.
A guia Cobertura no DevTools também informa quanto código CSS e JS no seu app não é usado.
Ao especificar uma configuração completa do Lighthouse por meio da CLI do Node, é possível executar a auditoria "Reduzir JavaScript não utilizado" para rastrear a quantidade de código não utilizado enviada com o aplicativo.
Se você usa o webpack como seu bundler, o Webpack Bundle Analyzer pode 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.
Essa visualização demonstra quais partes do pacote são maiores que outras para que você possa entender melhor o número e o tamanho das bibliotecas importadas pelo aplicativo. 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';
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 somente 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, use o carregamento lento.
Se você estiver 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 divididas em partes e importadas de forma seletiva. Nessas situações, considere se é possível remover a biblioteca completamente. A criação de uma solução personalizada ou o aproveitamento de uma alternativa mais leve devem sempre ser opções a serem consideradas. No entanto, é importante ponderar a complexidade e o esforço necessários para qualquer uma dessas estratégias antes de remover uma biblioteca completamente do seu app.