O JavaScript não utilizado pode diminuir a velocidade de carregamento da página:
- Se o JavaScript estiver bloqueando a renderização, o navegador precisará fazer o download, analisar, compilar e avaliar o script antes de prosseguir com os outros trabalhos necessários para renderizar a página.
- Mesmo que o JavaScript seja assíncrono (sem bloqueio de renderização), o código compete por largura de banda com outros recursos durante o download, o que tem implicações significativas no desempenho. Enviar códigos não utilizados pela rede também é desnecessário para usuários de dispositivos móveis que não têm planos de dados ilimitados.
Como a auditoria de JavaScript não utilizada falha
O Lighthouse sinaliza todos os arquivos JavaScript com mais de 20 kibibytes de código não utilizado:
![Uma captura de tela da auditoria.](https://developer.chrome.com/static/docs/lighthouse/performance/unused-javascript/image/a-screenshot-the-audit-5e55ec7ebbacf.jpg?authuser=7&hl=pt)
Como remover o JavaScript não utilizado
Detectar JavaScript não utilizado
A guia "Cobertura" no Chrome DevTools pode apresentar um detalhamento linha por linha do código não utilizado.
A classe Coverage
no Puppeteer pode ajudar a automatizar o
processo de detecção de código não utilizado e extração de código usado.
Ferramenta de build para suporte à remoção de códigos não utilizados
Confira os seguintes testes do Tooling.Report para descobrir se o bundler é compatível com recursos que facilitam evitar ou remover códigos não utilizados:
Orientações específicas para a pilha
Angular
Se você estiver usando a CLI Angular, inclua mapas de origem no build de produção para inspecionar seus pacotes.
Drupal
Remova os recursos JavaScript não utilizados e anexe apenas as bibliotecas Drupal necessárias à página ou ao componente relevante em uma página. Consulte Como definir uma biblioteca para mais detalhes.
Joomla
Reduza ou troque o número de extensões Joomla que carregam JavaScript não utilizado na sua página.
Magento
Desative o agrupamento de JavaScript integrado do Magento.
Reação
Se você não estiver renderizando do lado do servidor, divida os pacotes JavaScript com React.lazy()
.
Caso contrário, divida o código usando uma biblioteca de terceiros, como
loadable-components.
Vue
Se você não estiver renderizando no servidor e usando o roteador Vue, divida os pacotes por rotas de carregamento lento.
WordPress
Reduza ou troque o número de plug-ins do WordPress que carregam JavaScript não utilizado na sua página.
Recursos
- Código-fonte da auditoria Remover código não usado
- Remover código não utilizado
- Como adicionar interatividade com o JavaScript
- Divisão de código
- Exclusão de códigos inativos
- Código importado inativo
- Encontre códigos JavaScript e CSS não utilizados com a guia "Cobertura" no Chrome DevTools (em inglês)
- classe:
Coverage