Carregando Módulos Dinamicamente - JavaScript

Os módulos podem ser carregados dinamicamente em qualquer parte de outro módulo. Nesse caso, é importante lembrar que o módulo é carregado de forma assíncrona, e o resultado da função import será um objeto Promise, cujo resultado será o próprio módulo carregado.

import("caminho_do_módulo").then((module) => {
  // ações com o módulo
});

Também é possível usar o operador await para obter o objeto do módulo:

Por exemplo, suponha que temos o seguinte módulo definido em message.js:

export const hello = "Hello World!";

export default function sayHello() {
    console.log("Hello Programício");
}

Vamos carregar este módulo dinamicamente em outro módulo, main.js:

console.log("Main module starts");

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

console.log("Main module ends");

No método then(), a função recebe o módulo carregado como parâmetro. Em seguida, podemos acessar os componentes do módulo pelo nome, como a constante hello:

No entanto, se algum componente for exportado como padrão, utilizamos a palavra-chave default para acessá-lo. Por exemplo, como a função sayHello() é exportada como padrão, a expressão equivale a chamar essa função:

A saída do console será:

Main module starts
Main module ends
Hello Programício
Hello World!

Também podemos usar o operador await para obter o módulo carregado:

console.log("Main module starts");

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

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

console.log("Main module ends");

O carregamento dinâmico de módulos permite que os carreguemos em várias situações, incluindo funções, estruturas de repetição, condicionais e outras partes do programa. Por exemplo, podemos carregar um módulo dependendo de uma condição:

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

Aqui, obtemos a hora atual. Se for menor que 17, carregamos o módulo e exibimos o valor da constante hello do módulo carregado. Caso contrário, exibimos uma mensagem diferente.

O carregamento dinâmico de módulos é uma maneira conveniente de carregar módulos em tempo de execução, o que é útil em situações em que não sabemos antecipadamente quais módulos precisamos carregar, o que pode reduzir, por exemplo, o tempo de carregamento inicial da aplicação.