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:

export 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:

btn.addEventListener('click', function() {
	
});

Importemos el módulo usando el comando import:

btn.addEventListener('click', function() {
	import('./test.js');
});

El comando import devuelve una promesa como resultado:

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

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

btn.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:

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

Se puede realizar desestructuración al importar:

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

Crea un módulo que exporte un array con los nombres de los días de la semana. Al presionar un botón importa este módulo y muestra los días de la semana en una lista ul.