Come importare dinamicamente JavaScript con mappe di importazione
L'importazione dinamica nelle pagine Web viene eseguita attraverso una funzione chiamata mappe di importazione. Conoscerai il carico dinamico, il comportamento predefinito per lo strumento di build e l'uso di mappe di importazione con un esempio passo-passo. Iniziamo.
Comportamento predefinito per lo strumento di build
Per impostazione predefinita, quando si esegue una pagina Web HTML e tutti gli script inclusi al suo interno vengono compilati all'interno di un grande file. Tutte le librerie esterne e interne vengono immediatamente caricate nella memoria (server) e molta complessità viene aggiunta al progetto a causa del caricamento di vari frammenti di codice esterno contemporaneamente.
In precedenza, le applicazioni JavaScript erano molto semplici e basilari, ma col passare del tempo, le applicazioni stanno diventando sempre più impegnative e complesse, ed è esattamente per questo che caricare tutte le librerie esterne allo stesso tempo anche prima che siano necessarie non è una soluzione efficiente. È qui che il caricamento dinamico e la modularità degli script sono utili.
Caricamento dinamico
Come indica il nome, è il processo di caricamento di librerie e script esterni solo quando sono necessari, cioè in fase di esecuzione. Per quanto riguarda lo script dell'applicazione Web, il caricamento di script dinamici viene eseguito da una funzione in ES6 chiamata moduli in cui gli script sono divisi in componenti più piccoli. Allo stesso modo, l'importazione viene effettuata anche in fase di esecuzione utilizzando le mappe di importazione.
Per caricare le importazioni in fase di esecuzione utilizziamo una funzione chiamata mappe di importazione, Questa funzione ci consente di sovrascrivere la procedura predefinita degli strumenti di build e Carico pigro le nostre importazioni/biblioteche; Caricamento pigro significa caricare solo quando è richiesto.
Per dimostrare l'importazione dinamica di script esterni in una pagina Web, si imposterà una pagina Web che esegue un compito semplice, in seguito, importeremo una libreria esterna/pacchetto Lodash e useremo la sua funzione per svolgere la stessa attività
Nota: Hai bisogno di un editor di codice (preferibilmente vs codice) per questo e nodejs,
Passaggio 1: configurazione di un file HTML e di script
Per dimostrare l'uso di mappe di importazione per il caricamento dinamico, richiederemo l'installazione di Nodejs sul nostro sistema, fare clic qui per leggere l'installazione di NodeJS.
Crea una cartella sulla macchina e apri quella cartella con il codice VS (o l'editor di codice desiderato) come mostrato di seguito:
All'interno della cartella, crea un file HTML chiamato casa.html e un file di script come sceneggiatura.js:
Visualizzeremo alcune parole usando il file di script. Quindi, nel file HTML aggiungi il seguente tag script.
Nota: stiamo usando il Digitare proprietà e impostarlo uguale a modulo per avvisare il browser che questo è uno script modulare.
Ora, all'interno del file di script, digita le seguenti righe di codice per stampare il testo nella pagina Web HTML.
const el = documento.createElement ('p');const words = "linux, suggerimento, tutorial!";
const text = document.createtextnode (parole);
El.appendChild (testo);
documento.corpo.AppendChild (EL);
Per eseguire il file, aprire il terminale del codice VS e digitare "npx serve", Se è la prima volta che provi il comando di servizio NPX, potrebbe installare"servire"Pacchetto e chiedi affermazione, quindi inizierà l'installazione:
Successivamente, il comando NPX Serve ci mostrerà dove ospiterà la nostra pagina web HTML, quindi fai clic sul link come segue:
Quando apri il link http: // localhost: 3000 vedresti il seguente output:
Passaggio 2: importazione della libreria esterna
Stiamo per importare startcase metodo dal Lodash libreria e utilizzare questo metodo StartCase per convertire le nostre stringhe in tipo "Avvia il caso" utilizzando il seguente codice:
Import StartCase da '@lodash/startcase';Nota: Avvia il tipo di caso significa che ogni parola avrà la prima lettera in un caso di capitale.
Stai per modificare il file di script come:
Importa StartCase da "@Lodash/StartCase";const el = documento.createElement ("p");
const todisplay = "linux, suggerimento, tutorial!";
const text = document.CreateTextNode (startCase (todisplay));
El.appendChild (testo);
documento.corpo.AppendChild (EL);
Come puoi vedere, il codice è un po 'diverso, stiamo passando il Todisplay variabile a startcase funzione.
Aggiorna la pagina e vedrai il seguente errore sulla tua console per sviluppatori:
Questo perché il browser non sa cosa fare con questa dichiarazione di importazione all'inizio dello script
file. Il browser sta cercando di trovare il Lodash Pacchetto sul server Web locale, questo è anche il comportamento predefinito dello strumento di build. Per modificare questo utilizziamo mappe di importazione nei file HTML.
Passaggio 3: utilizzando le mappe di importazione
Mappa di importazione, è una funzione ES6, contiene una coppia di valore chiave, con il tasto che è il nome dell'importazione e il valore essendo la posizione dell'importazione.
La sintassi del La mappa dell'importazione è:
Per il nostro caso, aggiungiamo il seguente tag di script inclusa la mappa di importazione:
Nota: Il tag di script contenente la mappa di importazione deve essere aggiunto prima del tag script contenente il tipo modulare.
Dopo aver aggiunto queste righe, aggiorna la tua pagina web e dovresti vedere l'output:
Come puoi vedere, il startcase Metodo ha convertito correttamente le nostre parole di stringa in tipo "Avvia il caso". Ora stai includendo le librerie esterne in modo dinamico e possiamo esaminare il caricamento pigro negli strumenti per sviluppatori del browser.
Passaggio 4: esaminare il caricamento pigro
Apri la console per sviluppatori del browser e vai alla scheda Network.
Sotto la cascata, puoi vedere quale script stava caricando in che ora:
E da qui puoi vedere chiaramente che tutti gli script non sono stati caricati all'inizio, sono stati caricati pigramente in tempo di esecuzione.
Conclusione
In JavaScript, l'importazione dinamica viene eseguita da una funzione chiamata Mappe di importazione. Importazione dinamica significa sovrascrivere il comportamento predefinito degli strumenti di build e importare librerie esterne quando sono necessari in fase di esecuzione perché a volte hai bisogno di una libreria su una sola parte dell'applicazione Web e non degli altri. Gli strumenti di build predefiniti caricheranno tutte le librerie in un grande file che causerà un aumento del consumo di memoria. Hai imparato a utilizzare le mappe di importazione per caricare le librerie esterne pigre con un esempio ed averlo esaminato nella console dello sviluppatore.