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. No entanto, muitas vezes incluímos bibliotecas que não estamos usando totalmente. Para corrigir esse problema, analise seu pacote para detectar códigos não usados e remova as 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 métrica Largest Contentful Paint, por exemplo, pode ser afetada por código não utilizado quando recursos grandes competem pela largura de banda com outros recursos. O LCP também pode ser afetado se recursos JavaScript grandes que renderizam marcação apenas no cliente contiverem referências a candidatos de LCP ao atrasar o carregamento desses recursos.
O código não usado também pode afetar a Interaction to Next Paint (INP), porque até mesmo o JavaScript não usado precisa ser baixado, analisado, compilado e executado. O código não utilizado pode causar atrasos desnecessários no tempo de carregamento de recursos, uso de memória e atividade da linha de execução principal, que contribuem para a baixa resposta da página.
Neste guia, explicamos como analisar a base do código do seu projeto em busca de códigos não utilizados 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 as Ferramentas do desenvolvedor.
- Clique na guia Rede.
- Marque a caixa de seleção Desativar cache.
- Recarregue a página.
A guia Cobertura no DevTools também informa quantos códigos CSS e JS não são usados no seu aplicativo.
Ao especificar uma configuração completa do Lighthouse usando a CLI do Node, é possível executar a auditoria "Reduce unused JavaScript" para rastrear quanto código não utilizado é enviado com seu 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 o bundle.
Recarregar o aplicativo com esse plug-in 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 inutilizadas ou desnecessárias.
Remover bibliotecas não utilizadas
Na imagem do mapa de árvore anterior, há muitos pacotes em um único
domínio @firebase
. Se o site precisar 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 lugar algum, volte um pouco e veja quais dependências de nível superior o utilizam. Tente encontrar uma maneira de importar apenas os componentes necessários. Se não estiver usando uma biblioteca, remova-a. Se a biblioteca não for necessária para o carregamento inicial da página, considere o carregamento lento.
Se você estiver usando o webpack, confira a lista de plug-ins que removem automaticamente códigos não utilizados das bibliotecas mais usadas.
Remover bibliotecas desnecessárias
Nem todas as bibliotecas podem ser divididas em partes e importadas seletivamente. Nesses cenários, considere se é possível remover a biblioteca completamente. Criar uma solução personalizada ou aproveitar uma alternativa mais leve sempre é uma opção que vale a pena considerar. 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 app.