Tutto quello che devi sapere sulla suddivisione del codice JavaScript

I siti moderni spesso combinano tutto il loro javascript in un singolo, grande main.js. Script. Questo contiene regolarmente gli script per tutte le tue pagine o percorsi, anche se gli utenti hanno bisogno solo di una piccola porzione per la pagina che stanno visualizzando.

Quando JavaScript viene servito in questo modo, le prestazioni di caricamento delle tue pagine Web possono soffrire - specialmente con web design reattivo sui dispositivi mobili. Quindi sistemiamolo implementando la divisione del codice JavaScript.

• Come codice JavaScript più veloce e più leggero

Che problema risolve il codice di spaccare il codice?

Quando un browser Web vede a & lt; script & gt; Ha bisogno di trascorrere del tempo il download e l'elaborazione del JavaScript che stai facendo riferimento. Questo può sentirsi velocemente su dispositivi di fascia alta, ma caricare, analizzare ed eseguire il codice JavaScript inutilizzato può richiedere un po 'su dispositivi mobili medi con una rete più lenta e la CPU più lenta. Se hai mai dovuto accedere a Coffee Shop o Hotel WiFi, conosci le esperienze di rete lente possono accadere a tutti.

Ogni secondo trascorso in attesa su JavaScript per finire l'avvio può ritardare quanto presto gli utenti sono in grado di interagire con la tua esperienza. Questo è particolarmente il caso se il tuo UX si basa su JS per i componenti critici o addirittura collegati a collegare gli eventi per semplici pezzi di interfaccia utente.

Devo disturbare con il codice diviso?

Vale sicuramente la pena chiederti se hai bisogno di codici-split (se hai usato un semplice Builder del sito web Probabilmente non lo fai). Se il tuo sito richiede JavaScript per il contenuto interattivo (per funzionalità come i cassetti dei menu e i caroselli) o è un'applicazione a una pagina singola, basandosi su framework JavaScript per rendere l'interfaccia utente, la risposta è probabile "sì". Se la suddivisione del codice vale la pena per il tuo sito è una domanda di cui avrai bisogno per rispondere a te stesso. Capisci la tua architettura e come il tuo sito carichi il migliore. Per fortuna ci sono strumenti disponibili per aiutarti qui. Ricorda che se stai implementando le modifiche sul tuo sistema di progettazione, salva quei cambiamenti nel tuo condiviso deposito cloud. Quindi la tua squadra può vedere.

Ottenere aiuto

Per quelli nuovi alla divisione del codice JavaScript, Faro - Il pannello Audit negli strumenti per sviluppatori di Chrome - può aiutare a brillare una luce sul fatto che questo sia un problema per il tuo sito. L'audit che vorresti cercare è ridurre il tempo di esecuzione JavaScript (documentato Qui ). Questo audit evidenzia tutti gli script sulla tua pagina che può ritardare un utente che interagisce con esso.

Paginespeed Insights. È uno strumento online che può anche evidenziare le prestazioni del tuo sito - e include i dati del laboratorio dai dati del faro e del mondo reale sulle prestazioni del tuo sito dalla relazione sull'esperienza utente Chrome. Il tuo web hosting Il servizio può avere altre opzioni.

Copertura del codice negli strumenti per sviluppatori di Chrome

Se sembra che tu abbia degli script costosi che potrebbero essere divisi migliori, lo strumento successivo per esaminare è la funzione di copertura del codice negli strumenti di sviluppatori di Chrome (DevTools & GT; MENU TOP-DESTRA E GT; Più Strumenti & GT; Copertura). Questa misura quanto JavaScript (e CSS) non utilizzato è nella tua pagina. Per ogni sceneggiatura riassunta, DevTools mostrerà i "byte non utilizzati". Questo è il codice che puoi considerare la divisione e il caricamento pigro quando l'utente ne ha bisogno.

I diversi tipi di divisione del codice

Ci sono alcuni approcci diversi che puoi prendere quando si tratta di dividere il codice JavaScript. Quanto si applicano al tuo sito tende a variare a seconda che desideri dividere la pagina / applicazione "logica" o dividere le librerie / framework da parte di altri "venditori".

Divisione del codice dinamico: Molti di noi "staticamente" importono moduli e dipendenze JavaScript in modo che siano raggruppati insieme in un unico file in tempo di costruzione. La suddivisione del codice "dinamica" aggiunge la possibilità di definire punti nel tuo JavaScript che si desidera dividere e il carico pigro se necessario. JavaScript moderno usa la dinamica importare() dichiarazione per raggiungere questo obiettivo. Ci copriremo più a breve.

Divisione del codice del venditore: I framework e le biblioteche con cui ti affidhi (ad esempio reagire, angolare, vue o lodash) è improbabile che cambi negli script che invii ai tuoi utenti, spesso come la "logica" per il tuo sito. Per ridurre l'impatto negativo dell'invalidazione della cache per gli utenti che ritornano al tuo sito, è possibile dividere i tuoi "venditori" in uno script separato.

Divisione del codice punto entry-point: Le voci stanno iniziando i punti nel tuo sito o app che uno strumento come il webpack può esaminare per accumulare il tuo albero di dipendenza. La divisione delle voci è utile per le pagine in cui il routing lato client non viene utilizzato o si sta facendo affidamento su una combinazione di server e rendering lato client.

Per i nostri scopi in questo articolo, ci concentreremo sulla divisione dinamica del codice.

Prendi le mani con il codice diviso

Ottimizziamo le prestazioni JavaScript di a Semplice applicazione che ordina tre numeri Through Code Splitting - Questa è un'app del mio collega Houssein Djredieh. Il flusso di lavoro che utilizzeremo per rendere rapidamente il nostro carico JavaScript è misurato, ottimizzare e monitorare. Comincia qui .

Misurare le prestazioni

Prima di tentare di aggiungere eventuali ottimizzazioni, misureremo per la prima volta le prestazioni del nostro JavaScript. Come l'app Magic Sorter è ospitata su Itch, utilizzeremo il suo ambiente di codifica. Ecco come farlo:

• Fai clic sul pulsante Mostra live.
• Aprire i DevTools premendo CMD + opzione + I / Ctrl + Shift + i.
• Seleziona il pannello di rete.
• Assicurati di disattivare la cache controllata e ricarica l'app.

Questa semplice applicazione sembra utilizzare 71,2 KB di JavaScript solo per ordinare alcuni numeri. Ciò certamente non sembra giusto. Nella nostra fonte src / index.js. , la libreria di utilità loDash è importata e utilizziamo ordina per - Una delle sue utilità di ordinamento - per ordinare i nostri numeri. Loaland offre diverse funzioni utili ma l'app utilizza solo un singolo metodo da esso. È un errore comune installare e importare tutte le dipendenze di terze parti quando in realtà è effettivamente necessario solo usare una piccola parte di esso.

Ottimizza il tuo bundle.

Ci sono alcune opzioni disponibili per il taglio della nostra dimensione del Bundle JavaScript:

1. Scrivi un metodo di ordinamento personalizzato invece di fare affidamento su una biblioteca di terzaparty.
2. Uso Array.prototype.sort () , che è integrato nel browser.
3. Importa solo il ordina per Metodo dal lodash invece di tutta la libreria.
4. Scarica solo il codice per l'ordinamento quando un utente ne ha bisogno (quando fai clic su un pulsante).

Le opzioni 1 e 2 sono appropriate per ridurre le nostre dimensioni del bundle - queste probabilmente hanno senso per una reale applicazione. Per scopi didattici, proviamo qualcosa di diverso. Le opzioni 3 e 4 aiutano a migliorare le prestazioni dell'applicazione.

Importa solo il codice di cui hai bisogno

Modificheremo alcuni file per importare solo il singolo ordina per Metodo di cui abbiamo bisogno da LoDash. Iniziamo con la sostituzione del nostro lodash dipendenza da pacchetto.json. :

"lodash": "^4.7.0",

con questo:

"lodash.sortby": "^4.7.0",

In SRC / Index.js, importa questo modulo più specifico:

 JS
importazione "./style.css";
Importa _ da "loash";
import Sortby da "lodash.sortby"; 

Successivamente, aggiorneremo come i valori vengono ordinati:

 JS
Form.addeventListener ("Invia", E = & GT; {
  e.preventdefault ();
  Valori const = [ingresso1.ValueasNumber, Input2.ValueasNumber, Input3.ValueAsNumber];
  cost ordinatoValues ​​= _.Sortby (valori);
  Const SortedValues ​​= Sortbys (valori);
  Risultati.innerhtml = `..
    & lt; h2 & gt;
      $ {ordinatoValues}
    & lt; / h2 & gt;
  `
}); 

Ricarica l'app Magic Numbers, aprire gli strumenti degli sviluppatori e guarda di nuovo il pannello di rete. Per questa app specifica, la nostra dimensione del fascio è stata ridotta da una scala di quattro con piccoli lavori. Ma c'è ancora molto spazio per il miglioramento.

Divisione del codice JavaScript.

Il webpack è uno dei più popolari fatturatori di moduli JavaScript utilizzati da sviluppatori Web oggi. IT 'Bundles' (combina) Tutti i tuoi moduli JavaScript e altre attività in Browser Web di file statici possono leggere.

Il singolo bundle in questa applicazione può essere suddiviso in due script separati:

• Uno è responsabile del codice che costituisce il percorso iniziale.
• Un altro contiene il nostro codice di ordinamento.

Usando le importazioni dinamiche (con il importare() Parola chiave), un secondo script può essere caricato lazy su richiesta. Nella nostra app numeri magici, il codice che compone lo script può essere caricato secondo necessità quando l'utente fa clic sul pulsante. Iniziamo rimuovendo la importazione di alto livello per il metodo di ordinamento in src / index.js. :

 Importa Sortby da "lodash.sortby"; 

Importalo all'interno del listener eventi che si spara quando si fa clic sul pulsante:

Form.addeventListener ("Invia", E = & GT; {
  e.preventdefault ();
  import ('loash.sortby')
    .then (modulo = & gt; module.default)
    .then (Sortinput ())
    .CATCH (ERR = & GT; {Alert (ERR)});
}););

Questa dinamica importare() La funzione che stiamo usando fa parte di una proposta di StandardStrack per includere la possibilità di importare dinamicamente un modulo nello standard di lingua JavaScript. Il webpack supporta già questa sintassi. Puoi leggere di più su come funzionano le importazioni dinamiche in questo articolo .

Il importare() dichiarazione restituisce una promessa quando si risolve. Il webpack considera questo come un punto di split che si romperà in uno script separato (o bloccato). Una volta restituito il modulo, il module.default. è usato per fare riferimento all'esportazione predefinita fornita da lodash . La promessa è incatenata con un'altra .poi() Chiamare A. Sortinput. Metodo per ordinare i tre valori di input. Alla fine della catena della promessa, .catturare() è chiamato a gestire dove la promessa viene respinta come risultato di un errore.

In una vera applicazione di produzione, è necessario gestire gli errori di importazione dinamici in modo appropriato. I semplici messaggi di avviso (simili a ciò che vengono utilizzati qui) sono quelli che vengono utilizzati e potrebbero non fornire la migliore esperienza utente per consentire agli utenti di sapere che qualcosa è andato storto.

Nel caso in cui si veda un errore di rivestimento come "Errore di analisi: importazione ed esportazione può apparire solo al livello superiore", sapere che ciò è dovuto alla sintassi di importazione dinamica non ancora finalizzata. Sebbene il webpack lo supportasse, le impostazioni per ESLINT (uno strumento di rivestimento JavaScript) utilizzato da Itch non sono state aggiornate per includere ancora questa sintassi ma funziona ancora.

L'ultima cosa che dobbiamo fare è scrivere il Sortinput. Metodo alla fine del nostro file. Questa deve essere una funzione che restituisce una funzione che assume il metodo importato da lodash.sorbby. . La funzione nidificata può ordinare i tre valori di input e aggiornare il DOM:

 Cost Sortinput = () = & GT; {
  Ritorno (Sortby) = & GT; {
    Valori const = [
      Input1.ValueAsLumber,
      Input2.ValueAsLumber,
      Input3.ValueasNumber.
    ];
    Const SortedValues ​​= Sortbys (valori);
    Risultati.innerhtml = `..
      & lt; h2 & gt;
        $ {ordinatoValues}
      & lt; / h2 & gt;
    `
  };;
} 

Monitorare i numeri

Ora ricariamo l'applicazione un'ultima volta e tieni d'occhio il pannello di rete. Dovresti notare come viene scaricato solo un piccolo bundle iniziale quando l'app carica. Dopo aver cliccato il pulsante per ordinare i numeri di ingresso, lo script / chunk contenente il codice di ordinamento viene recuperato ed eseguito. Vedi come i numeri vengono ancora ordinati come ci aspetteremmo?

Il codice JavaScript Spliting e il caricamento pigro possono essere molto utili per il taglio della dimensione iniziale del pacchetto della tua app o del sito. Questo può comportare direttamente i tempi di carico più veloci per gli utenti. Sebbene abbiamo esaminato l'aggiunta di un codice diviso a un'applicazione JavaScript di vaniglia, puoi anche applicarlo alle app basate con librerie o quadri.

Lazy-loading con una libreria o un framework JavaScript

Un sacco di strutture popolari supportano l'aggiunta di divisione del codice e caricamento pigro utilizzando importazioni dinamiche e webpack.

Ecco come potresti caricare la pigro un componente "Descrizione" del film utilizzando React (con React.lazy () e la loro caratteristica di suspense) per fornire un fallback "caricamento ..." mentre il componente viene caricato in pigro (vedi Qui Per alcuni dettagli):

 Importa reagire, {suspense} da "reagire";
Const Description = react.Lazy (() = & GT; import ('./ Descrizione'));
App Function () {
  ritorno (
    & lt; div & gt;
      & lt; h1 & gt; il mio film & lt; / h1 & gt;
      & lt; suspense fallback = "Caricamento ..." e GT;
        & lt; Descrizione / & GT;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

La divisione del codice può aiutare a ridurre l'impatto di JavaScript sulla tua esperienza utente. Sicuramente considerarlo se si dispone di bundle JavaScript più grandi e in caso di dubbio, non dimenticare di misurare, ottimizzare e monitorare.

Questo articolo è stato originariamente pubblicato in questione 317 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 317 qui o Iscriviti qui .

Articoli Correlati:

• 9 dei migliori framework JavaScript
• 15 strumenti essenziali JavaScript che dovresti usare
• 14 delle migliori API JavaScript