Remova o código não utilizado
O npm facilita a adição de código ao seu projeto. Mas você está realmente usando todos
esses bytes extras?
Registros como o npm transformaram o mundo do JavaScript para melhor, permitindo que qualquer pessoa baixe e use facilmente mais de meio milhão de pacotes públicos. Mas muitas vezes incluímos bibliotecas que não estamos utilizando totalmente. Para corrigir esse problema, analise seu pacote para detectar código não utilizado. Em seguida, remova as bibliotecas não utilizadas e desnecessárias.
Analise seu pacote #
DevTools torna mais fácil ver o tamanho de todas as solicitações de rede: 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Network tab. 1. Select the Disable cache checkbox. 1. Reload the page.
A guia Cobertura em DevTools também informará quanto código CSS e JS em seu aplicativo não está sendo usado.
Ao especificar uma configuração completa do Lighthouse por meio de seu Node CLI, uma auditoria de "JavaScript não usado" também pode ser usada para rastrear quanto código não usado está sendo enviado com seu aplicativo.
Se você estiver usando o webpack como seu empacotador, o Webpack Bundle Analyzer ajudará a investigar o que constitui o bundle. Inclua o plug-in em seu arquivo de configurações do webpack como qualquer outro plug-in:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}Embora o webpack seja geralmente usado para construir aplicativos de página única, outros empacotadores, como Parcel e Rollup, também têm ferramentas de visualização que você pode usar para analisar seu pacote.
Recarregar o aplicativo com este plugin incluído mostra um mapa de árvore com zoom de todo o seu pacote.
Usar esta visualização permite que você inspecione quais partes de seu pacote são maiores do 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 alguma biblioteca não utilizada ou desnecessária.
Remover bibliotecas não utilizadas #
Na imagem anterior do mapa de árvore, existem alguns pacotes dentro de um único domínio @firebase. Se seu site precisa apenas do componente de banco de dados firebase, atualize as importações para buscar essa biblioteca:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';É importante enfatizar que este processo é significativamente mais complexo para aplicações 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 em quais de suas dependências de nível superior está sendo usado. Tente encontrar uma maneira de importar apenas os componentes de que você precisa. Se você não estiver usando uma biblioteca, remova-a. Se a biblioteca não for necessária para o carregamento da página inicial, considere se ela pode ser carregada lentamente.
Caso você esteja usando o webpack, verifique a lista de plug-ins que removem automaticamente o código não utilizado das bibliotecas mais usadas.
Remover bibliotecas desnecessárias #
Nem todas as bibliotecas podem ser facilmente divididas em partes e importadas seletivamente. Nesses cenários, verifique se biblioteca pode ser removida completamente. Construir uma solução personalizada ou aproveitar uma alternativa mais leve devem sempre ser opções que valem a pena considerar. No entanto, é importante pesar na complexidade e o esforço necessários para qualquer um desses esforços antes de remover uma biblioteca inteiramente de um aplicativo.