I registry come npm hanno ha trasformato il mondo JavaScript in meglio, consentendo a chiunque di scaricare e utilizzare oltre mezzo milione di pacchetti pubblici. Ma spesso includiamo librerie che non stiamo utilizzando completamente. Per risolvere il problema, analizza il bundle per rilevare il codice inutilizzato, quindi rimuovi le librerie unused e non necessarie.
Impatto sui Core Web Vitals
Se rimuovi il codice inutilizzato, puoi migliorare il rendimento del tuo sito web Core Web Vitals. Largest Contentful Paint, Ad esempio, possono essere influenzate da codice inutilizzato quando asset di dimensioni inutilmente grandi in competizione per la larghezza di banda con altre risorse. La metrica LCP può risentirne anche se Asset JavaScript che visualizzano il markup solo sul client contenere riferimenti a candidati LCP ritardando il caricamento di queste risorse.
Il codice inutilizzato può anche influire su Interaction to Next Paint (INP). perché anche codice JavaScript inutilizzato deve essere scaricato, analizzato, compilato, eseguito. Il codice inutilizzato può introdurre ritardi inutili nel carico delle risorse tempo, memoria utilizzata e attività dei thread principali che contribuiscono a compromettere la qualità della pagina la reattività.
Questa guida spiega come analizzare il codebase del progetto per individuare codice inutilizzato e offre strategie per eliminare il codice non utilizzato dagli asset JavaScript che invii per i tuoi utenti in produzione.
Analizza il tuo bundle
DevTools può mostrarti la dimensione di tutte le richieste di rete:
- Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Seleziona la casella di controllo Disabilita cache.
- Ricarica la pagina.
La scheda Copertura DevTools indica anche la quantità di codice CSS e JS non utilizzata nella tua applicazione.
specificando una configurazione Lighthouse completa tramite l'interfaccia a riga di comando Node, puoi eseguire il controllo Riduci JavaScript inutilizzato per tenere traccia della quantità di codice inutilizzato spedito con la tua applicazione/
Se utilizzi webpack come bundler, Strumento di analisi bundle Webpack può aiutarti a scoprire i componenti del set. Includi il plug-in nel file di configurazione webpack come per qualsiasi altro plug-in:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Sebbene Webpack venga comunemente utilizzato per creare applicazioni a pagina singola, come Parcel e Aggregazione, includono anche strumenti di visualizzazione che puoi usare per analizzare il pacchetto.
Ricaricando l'applicazione con questo plug-in incluso viene mostrata una mappa ad albero zoomabile l'intero set.
Questa visualizzazione mostra quali parti del bundle sono più grandi di altri, così puoi capire meglio il numero e le dimensioni delle librerie importata dall'applicazione. In questo modo puoi capire meglio se stai utilizzando o librerie non necessarie.
Rimuovi le librerie inutilizzate
Nell'immagine ad albero precedente, ci sono diversi pacchetti all'interno di un
Dominio @firebase. Se il tuo sito web richiede solo
il componente di database Firebase,
aggiorna le importazioni per recuperare la libreria:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Per il pacchetto dall'aspetto misterioso che sicuramente non viene usato da qualche parte, fai un passo indietro e scopri quali delle tue dipendenze di primo livello utilizzandolo. Prova a trovare un modo per importare solo i componenti di cui hai bisogno. Se non la utilizzi, rimuovila. Se la libreria non è necessaria per caricamento iniziale della pagina, considera l'utilizzo del caricamento lento li annotino.
Se usi Webpack, consulta l'elenco di plug-in che eseguono Rimuovi il codice inutilizzato dalle librerie più diffuse.
Rimuovi le librerie non necessarie
Non tutte le librerie possono essere suddivise in parti e importate selettivamente. In questi casi, valuta se puoi rimuovere completamente la raccolta. Creare una soluzione personalizzata o sfruttare un'alternativa più leggera dovrebbe che vale la pena prendere in considerazione. Tuttavia, è importante soppesare la complessità e per una di queste strategie prima di rimuovere una libreria completamente dalla tua app.