Încărcarea dinamică a modulelor

Modulele pot fi încărcate dinamic în orice parte a unui alt modul. În acest caz, trebuie să țineți minte că modulul este încărcat asincron, iar rezultatul funcției import va fi un obiect Promise, a cărui rezolvare va fi chiar modulul încărcat.

import("calea_către_modul").then((module) => {
   // acțiuni cu modulul
 });

De asemenea, se poate folosi operatorul await pentru a obține obiectul modulului:

let module = await import("calea_către_modul");

De exemplu, să presupunem că avem definit următorul modul message.js:

export const hello = "Hello Work!";

export default function sayHello() {
 console.log("Hello FDC.COM");
}

Aici sunt exportate constanta hello și funcția sayHello(), funcția fiind exportată implicit.

Să conectăm dinamic acest modul într-un alt modul main.js:

console.log("Main module starts");

import("./message.js").then((module) => {
   
   module.default();
   console.log(module.hello);
});

console.log("Main module ends");

Aici, funcția din metoda then() primește ca parametru modulul încărcat. Apoi, putem accesa componentele modulului după nume. De exemplu, accesând constanta hello

module.hello

Totuși, dacă un component este exportat implicit, pentru a accesa acest component se folosește cuvântul cheie default. Astfel, deoarece funcția sayHello() este exportată implicit, expresia:

module.default();

va reprezenta de fapt apelul acestei funcții.

Output-ul consolii programului:

Main module starts
Main module ends
Hello FDC.COM
Hello Work!

De asemenea, în acest caz, se putea folosi operatorul await pentru a obține modulul încărcat:

console.log("Main module starts");

const module = await import("./message.js");

module.default();
console.log(module.hello);

console.log("Main module ends");

Încărcarea dinamică a modulelor ne oferă posibilitatea de a încărca module în diverse situații, inclusiv în funcții, construcții ciclice și condiționale și în alte părți ale programului. De exemplu, am putea încărca un modul în funcție de condiție:

const hour = new Date().getHours();
if(hour < 17){
   const module = await import("./message.js");
   console.log(module.hello);
}
else{
   console.log("Go home");
}

În acest caz, obținem ora curentă. Și dacă este mai mică de 17, încărcăm modulul și afișăm valoarea constantei hello din modulul încărcat. Altfel, afișăm un anumit mesaj.