Riduci i payload JavaScript con la suddivisione del codice

Houssein Djirdeh

La maggior parte delle pagine web e delle applicazioni è costituita da molte parti diverse. Invece di inviando tutto il codice JavaScript che costituisce l'applicazione non appena il primo del codice JavaScript, suddividendo il codice JavaScript in più blocchi migliora le prestazioni delle pagine.

Questo codelab mostra come utilizzare la suddivisione del codice per migliorare le prestazioni di una una semplice applicazione che ordina tre numeri.

Misura

Come sempre, è importante misurare il rendimento di un sito web prima cercando di aggiungere ottimizzazioni.

1. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero .
2. Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
3. Fai clic sulla scheda Rete.
4. Seleziona la casella di controllo Disabilita cache.
5. Ricarica l'app.

71,2 KB di JavaScript solo per ordinare alcuni numeri in una semplice applicazione. What gives?

Nel codice sorgente (src/index.js), la libreria lodash viene importata e utilizzata in questa applicazione. Lodash offre molte utili utilità , ma in questo caso viene utilizzato un solo metodo del pacchetto. Installare e importare intere dipendenze di terze parti dove parte di cui viene utilizzata è un errore comune.

Ottimizza

Esistono diversi modi per tagliare le dimensioni del set:

1. Scrivi un metodo di ordinamento personalizzato invece di importare una libreria di terze parti
2. Utilizza il metodo Array.prototype.sort() integrato per ordinare numericamente
3. Importa solo il metodo sortBy da lodash e non dall'intera libreria
4. Scarica il codice per eseguire l'ordinamento solo quando l'utente fa clic sul pulsante

Le opzioni 1 e 2 sono metodi perfettamente appropriati per ridurre le dimensioni dei pacchetti (e probabilmente sarebbe la più sensata per un'applicazione reale). Tuttavia, si tratta di non sono stati usati in questo tutorial per l'insegnamento 🔍.

Entrambe le opzioni 3 e 4 consentono di migliorare le prestazioni dell'applicazione. La alcune sezioni successive di questo codelab trattano questi passaggi. Come qualsiasi altro tipo di programmazione del tutorial, prova sempre a scrivere il codice personalmente, invece di copiarlo e incollarlo.

Importa solo ciò che ti serve

È necessario modificare alcuni file per importare il singolo metodo da lodash. Per iniziare, sostituisci questa dipendenza in package.json:

"lodash": "^4.7.0",

con questo:

"lodash.sortby": "^4.7.0",

Ora in src/index.js, importa questo modulo specifico:

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

Aggiorna anche il modo in cui vengono ordinati i valori:

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

Ricarica l'applicazione, apri DevTools e dai un'occhiata al riquadro Rete. di nuovo.

Per questa applicazione, le dimensioni del bundle si sono ridotte di oltre 4 volte con una ma c'è ancora margine di miglioramento.

Suddivisione del codice

webpack è uno dei pacchetti open source più popolari i bundler di moduli utilizzati oggi. In breve, raggruppa tutti i moduli JavaScript (come e altre risorse) che compongono un'applicazione web in file statici che, essere lette dal browser.

Il bundle singolo utilizzato in questa applicazione può essere suddiviso in due di grandi dimensioni:

• Uno responsabile del codice che forma il nostro percorso iniziale
• Un blocco secondario che contiene il nostro codice di ordinamento

Con l'uso delle importazioni dinamiche, un blocco secondario può essere caricato tramite caricamento lento,oppure on demand. In questa applicazione, il codice che compone il blocco vengono caricate solo quando l'utente preme il pulsante.

Inizia rimuovendo l'importazione di primo livello per il metodo di ordinamento in src/index.js:

import sortBy from "lodash.sortby";

e importalo nel listener di eventi che si attiva quando viene premuto il pulsante:

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

La funzionalità import() fa parte di una proposta (attualmente in fase di sviluppo) 3 del processo TC39) per includere la possibilità di importare dinamicamente un modulo. webpack ha già incluso il supporto per questa funzionalità e segue la stessa sintassi prevista dalla proposta.

import() restituisce una promessa e, quando viene risolta, il valore selezionato che viene suddiviso in un blocco separato. Dopo che il modulo è restituito, module.default viene utilizzato per fare riferimento al valore predefinito fornito da lodash. La promessa è concatenata a un altro .then che chiama un metodo sortInput per ordinare i tre valori di input. Alla fine della promessa, .catch() viene utilizzato per gestire i casi in cui la promessa viene rifiutata a causa di un errore.

L'ultima cosa da fare è scrivere il metodo sortInput fine del file. Deve trattarsi di una funzione che restituisce una funzione che prende il metodo importato da lodash.sortBy. La funzione nidificata può quindi ordinare i tre valori di input e aggiornare il DOM.

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

Monitoraggio

Ricarica l'applicazione un'ultima volta e tieni d'occhio la Rete di nuovo. Non appena viene scaricato l'app, viene scaricato solo un piccolo bundle iniziale viene caricato automaticamente.

Dopo aver premuto il pulsante per ordinare i numeri di input, il blocco che contiene il codice di ordinamento viene recuperato ed eseguito.

Nota come i numeri vengono comunque ordinati.

Conclusione

La suddivisione del codice e il caricamento lento possono essere tecniche estremamente utili per ridurre la dimensione iniziale del bundle dell'applicazione e ciò può generare direttamente tempi di caricamento delle pagine molto più rapidi. Ci sono, però, alcuni elementi importanti prima di includere questa ottimizzazione nella tua applicazione.

UI con caricamento lento

Durante il caricamento lento di moduli di codice specifici, è importante considerare come per gli utenti con connessioni di rete più deboli. Suddivisione e caricare una porzione di codice molto grande quando un utente invia un'azione può causare sembra che l'applicazione abbia smesso di funzionare, quindi considera l'idea di mostrare indicatore di caricamento.

Caricamento lento dei moduli dei nodi di terze parti

Non è sempre l'approccio migliore per utilizzare il caricamento lento delle dipendenze di terze parti nel tuo dell'applicazione e dipende dal luogo in cui le utilizzi. Di solito, le terze parti le dipendenze sono suddivise in un bundle vendor separato che può essere memorizzato nella cache non si aggiornano spesso. Scopri di più su come SplitChunksPlugin può di aiutarti a farlo.

Caricamento lento con un framework JavaScript

Molti framework e librerie popolari che utilizzano Webpack forniscono astrazioni semplifica il caricamento lento rispetto all'utilizzo di importazioni dinamiche all'interno del un'applicazione.

• Moduli di caricamento lento con Angular
• Suddivisione del codice con il router React
• Caricamento lento con il router Vue

Sebbene sia utile per comprendere come funzionano le importazioni dinamiche, utilizza sempre consigliato dal tuo framework/libreria per eseguire il caricamento lento di moduli specifici.

Precaricamento e precaricamento

Se possibile, utilizza i suggerimenti del browser come <link rel="preload"> o <link rel="prefetch"> per provare a caricare moduli critici per prima cosa. webpack supporta entrambi i suggerimenti tramite l'uso di commenti magici nell'importazione istruzioni. Ciò è spiegato più dettagliatamente nel Guida al precaricamento dei blocchi critici.

Caricamento lento di più del codice

Le immagini possono costituire una parte significativa di un'applicazione. Caricamento lento sono below the fold o al di fuori dell'area visibile del dispositivo possono velocizzare un sito web. Letto di più al riguardo nel Guida alle dimensioni lente.