November 25, 2022 9:50 AM (CST)
Aportes
<aside> 💡 Cargar todos nuestros módulos al inicio << Cargar módulos solo cuando el usuario lo requiera.
</aside>
dynamic Import viene a cambiar mucho la forma en la que podemos organizar nuestros proyectos aprovechando el concepto de módulos que aprendidos en clases pasadas.
Este concepto nos permite usar tal/ese import cuando lo necesitemos, esto nos da una garantía mucho mejor para organizar nuestros proyectos.
Cargar todos los archivos al inicio harán nuestro proyecto mucho más pesado. Ahora podemos decir cada cuando llamar ciertas piezas de código.
Utilizar los primeros renders vitales de nuestro proyecto y consecuentemente que el usuario se mueva/interactúe por el sitio web ir agregando esos módulos.
Podemos cargar nuestra página web con lo mínimo que va a requerir y conforme el usuario va interactuando/navegando, ir llamando las demás piezas de código.
Esto le dará mayor performance a tus aplicaciones.
Con esta sintaxis import() podemos hacer imports dinámicos ya que esta sintaxis nos permite usar promesas o funciones asíncronas. Estas pueden estar condicionadas a eventos (Click en cierta parte de la aplicación)
A diferencia de import... from... que solo permite tratar desde el inicio.
La expresión import() recibe un argumento de tipo string con la ruta del módulo a importar y devuelve una promesa/function async.
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Import</title>
</head>
<body>
<p>Esto ya debería funcionar</p>
<p>Now?</p>
<button id="btn">Click Me</button>
<script type="module" src="06-dynamic-import.js"></script>
</body>
</html>
**06-dynamic-import.js**
const button = document.getElementById("btn");
button.addEventListener("click", async function () {
const module = await import("./module.js");
console.log(module);
module.hello();
})
**module.js**
export function hello() {
console.log("Hola Mundo")
}
El funcionamiento se es notable desde la consola del navegador. En la ventana saliente desde la:
consola:
Se ve el resultado al cliquear el botón (”Click”)