Registri come npm hanno trasformato in meglio il mondo JavaScript, consentendo a chiunque di scaricare e utilizzare oltre mezzo milione di pacchetti pubblici. Spesso, però, includiamo librerie che non utilizziamo appieno. Per risolvere il problema, analizza il bundle per rilevare il codice inutilizzato, quindi rimuovi le librerie utilizzate e non necessarie.
Impatto sui Segnali web essenziali
Se rimuovi il codice inutilizzato, puoi migliorare i Segnali web essenziali del tuo sito web. La visualizzazione elemento più grande, ad esempio, può essere influenzata da codice inutilizzato quando asset inutilmente di grandi dimensioni competono con larghezza di banda con altre risorse. La metrica LCP può anche essere interessata se gli asset JavaScript di grandi dimensioni che eseguono il rendering del markup solo sul client contengono riferimenti a candidati LCP ritardando il caricamento delle risorse.
Il codice inutilizzato può inoltre influire sull'interazione con la prossima vernice (INP), perché anche il codice JavaScript inutilizzato deve essere scaricato, analizzato, compilato ed eseguito. Il codice inutilizzato può introdurre ritardi inutili nel tempo di caricamento delle risorse, nell'utilizzo della memoria e nell'attività del thread principale, che contribuiscono a una scarsa reattività della pagina.
Questa guida spiega come analizzare il codebase del progetto per individuare il codice inutilizzato e offre strategie per eliminare il codice inutilizzato dagli asset JavaScript che invii agli utenti in produzione.
Analizza il tuo pacchetto
DevTools può mostrarti le dimensioni di tutte le richieste di rete:
- Premi "Control+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 di DevTools indica anche la quantità di codice CSS e JS nella tua applicazione inutilizzata.
Specificando una configurazione Lighthouse completa tramite la relativa interfaccia a riga di comando dei nodi, puoi eseguire il controllo Riduci JavaScript inutilizzato per tracciare la quantità di codice inutilizzato inviato con la tua applicazione.
Se utilizzi webpack come bundler, lo Strumento di analisi bundle Webpack può aiutarti a esaminare i componenti del bundle. Includi il plug-in nel file di configurazione del tuo webpack come qualsiasi altro plug-in:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
Sebbene il webpack sia comunemente utilizzato per creare applicazioni a pagina singola, altri bundle, come Parcel e Rollup, dispongono anche di strumenti di visualizzazione che puoi utilizzare per analizzare il bundle.
Se viene ricaricata l'applicazione con questo plug-in incluso, viene mostrata una mappa ad albero con zoom dell'intero bundle.
Questa visualizzazione mostra quali parti del bundle sono più grandi delle altre e consente di comprendere meglio il numero e le dimensioni delle librerie importate dalla tua applicazione. Ciò può aiutarti a capire se stai utilizzando librerie inutilizzate o non necessarie.
Rimuovi le librerie inutilizzate
Nell'immagine precedente della mappa ad albero, sono presenti diversi pacchetti all'interno di un singolo dominio @firebase. Se il tuo sito web richiede solo il componente del database Firebase, aggiorna le importazioni per recuperare questa libreria:
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Per il pacchetto dall'aspetto misterioso che sicuramente non viene usato, fai un passo indietro e scopri quali delle tue dipendenze di primo livello lo stanno usando. Cerca di trovare un modo per importare da questo solo i componenti che ti servono. Se non utilizzi una raccolta, rimuovila. Se la libreria non è obbligatoria per il caricamento iniziale della pagina, puoi utilizzare il caricamento lento.
Se usi il webpack, consulta l'elenco dei plug-in che rimuovono automaticamente il codice inutilizzato dalle librerie più diffuse.
Rimuovi le librerie non necessarie
Non tutte le librerie possono essere suddivise in parti e importate in modo selettivo. In questi casi, valuta se puoi rimuovere completamente la raccolta. Creare una soluzione personalizzata o sfruttare un'alternativa più leggera dovrebbero essere sempre opzioni che vale la pena prendere in considerazione. Tuttavia, è importante valutare la complessità e l'impegno necessari per una di queste strategie prima di rimuovere completamente una libreria dall'app.