Importación dinámica de módulos ES en JavaScript

Los módulos ES se pueden importar dinámicamente. Esta capacidad a veces es útil. Veamos cómo se hace. Supongamos que tenemos el siguiente módulo:

src/test.jsexport function func1() {
  return '1'
}
export function func2() {
  return '2'
}
export default function() {
  return 'text';
};

Supongamos que queremos importar este módulo no inmediatamente, sino tras algún evento, por ejemplo, al hacer clic en un botón:

src/index.jsbtn.addEventListener('click', function() {
  
});

Importemos el módulo usando el comando import:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js');
});

El comando import devuelve una promesa como resultado:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    
  });
});

En la variable del callback se obtendrá un objeto con las funciones exportadas:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    let res1 = mod.func1();
    let res2 = mod.func2();
    
    console.log(res1, res2);
  });
});

Lo que se exporta por defecto, estará en la clave default:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(mod => {
    let dfn = mod.default;
    console.log(dfn);
  });
});

Se puede realizar desestructuración al importar:

src/index.jsbtn.addEventListener('click', function() {
  import('./test.js').then(({func1, func2}) => {
    let res1 = func1();
    let res2 = func2();
    
    console.log(res1, res2);
  });
});