No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES11: dynamic Import

30/35
Recursos

La expresi贸n import() permite manejar m贸dulos din谩micamente, ya que la sintaxis de ECMAScript import ... from ... no lo permite.

C贸mo utilizar importaci贸n din谩mica

La importaci贸n din谩mica consiste en cargar los m贸dulos cuando el usuario los vaya a utilizar, y no al iniciar la aplicaci贸n. Esto permite que la p谩gina web sea m谩s r谩pida, porque descarga menos recursos.

La expresi贸n import() recibe un argumento de tipo string con la ruta del m贸dulo a importar y devuelve una promesa.

const ruta = "./modulo.js"

// Utilizando promesas
import(ruta)
    .then( modulo => {
        modulo.funcion1()
        modulo.funcion2()
    })
    .catch(error => console.log(error))
    
// Utilizando async/await
async function importarModulo(rutaDelModulo) {
    const modulo = await import(rutaDelModulo)
    modulo.funcion1()
    modulo.funcion2()
}

importarModulo(ruta)

Ejemplo utilizando importaci贸n din谩mica

De esta manera puedes utilizar una importaci贸n din谩mica en tu aplicaci贸n para desencadenar una descarga de un m贸dulo cuando el usuario lo vaya a utilizar. Por ejemplo, al realizar clic en un bot贸n.

const boton = document.getElementById("boton")

boton.addEventListener("click", async function () {
    const modulo = await import('./modulo.js')
    modulo.funcion()
})

Puedes usar las herramientas de desarrollador para visualizar la descarga de archivos al realizar clic en el bot贸n.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 38

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola chic@s. 馃槂
ES11: dynamic Import

  • Module.js
export function hello() {
    console.log("Hola Mundo")
}

  • 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>
    <button id="btn">Click</button>
    <script type="module" src="06-dynamic-import.js"></script>
</body>
</html>
  • Dynamic-Import.js
const button = document.getElementById("btn");

button.addEventListener("click", async function () {
    const module = await import("./module.js");
    console.log(module);
    module.hello();
})

Dado que el import retorna un objeto, se puede hacer un desestructuraci贸n del objeto para acceder m谩s f谩cil 馃憤馃徏

// module.js
export function sayHello() {
	console.log('Hello');
}

// main.js
const btn = document.querySelector('#try');

btn.addEventListener('click', async () => {
	const { sayHello } = await import('./module');

	sayHello();
});

Otro punto importante a recalcar es que como menciona Oscar, el modulo o el JS que nosotros importemos dinamicamente no usara nada de red hasta que lo solicitemos, por lo cual podremos verlo en la pesta帽a de red en cuanto solicitemos el recurso, esto ayuda a que no generemos trafico inncesario en la red mientras cargamos la pagina y solo al momento de ser utiliado

Algo de lo que se quejan muchas personas es que JavaScript hace lenta las webs, pero en ocasiones es por tenemos y cargamos muchos scritps.

Esto me parece mega importante ya que podremos cargar s贸lo lo que necesitemos y cuando lo necesitemos

El secreto del dynamic import. Es usar el async, await para llamar el modulo unicamente cuando sea requerido.

dynamic import es una nueva caracter铆stica de JavaScript que se introdujo en ECMAScript 2020. Esta caracter铆stica permite cargar m贸dulos de forma din谩mica en tiempo de ejecuci贸n, en lugar de importarlos en tiempo de compilaci贸n.

El uso de dynamic import se realiza mediante la funci贸n import(), que devuelve una promesa que se resuelve con el m贸dulo importado. Esto permite cargar m贸dulos solo cuando se necesitan, lo que puede mejorar el rendimiento y la usabilidad de la aplicaci贸n.

Aqu铆 hay un ejemplo de c贸mo se puede usar dynamic import en JavaScript:

// moduleA.js
export const message = 'Hello from moduleA';

// main.js
async function loadModule() {
  const module = await import('./moduleA.js');
  console.log(module.message);
}

loadModule();
// Output: Hello from moduleA

En este ejemplo, se crea un m贸dulo moduleA.js que exporta una constante message. Luego, en main.js, se crea una funci贸nloadModule que usa dynamic import para cargar moduleA.js de forma din谩mica. La funci贸n import devuelve una promesa que se resuelve con el m贸dulo importado, y la funci贸n loadModule espera a que se resuelva antes de imprimir el valor de la constante message.

Esta clase me gusto mucho.

quisiera aclarar algo, y es que lo que hagamos en el modulo es lo que se va a ejecutar no lo que hagamos en el archivo al que estamos importando, si no me explique bien, dejo un ejemplo


const button = document.getElementById("btn");

button.addEventListener("click",async function () {
    const module = await import("./module.js");
    module.saludo();
});

tenemos el archivo javascript principal , al cual solo llamaremos la funci贸n que vamos a usar solamente la llamamos con module.saludo(); si en el modulo escribimos que se abra como alert() o window.prompt() o con console.log() se ejecutara el del modulo

module.js
export function saludo() {
    window.prompt("HELLO WORLD");
}

y nos aparecer谩 error si colocamos el console.log() en el archivo principal de javascript, espero haberme explicado, si no acepto feedback, gracias por su atenci贸n.

馃スWow. Me encanto dynamic Import, puede mejorar la experiencia del usuario muchisimo. Antes lo que haciamos era colocar un segundo <script>

  <script src="./module.js"></script>
    <script tyoe="module" src="./06-dynamic-import.js"></script>
<code> 

Lo que hac铆a que se descargaran los dos archivos, haciendo nuestra p谩gina m谩s pesada.

馃捈 Archivos del Proyecto 馃捈


Pasos 馃搶

  • 鈥 Dentro de la carpeta es11, crear el archivo llamado: 06-dynamic-import.js
      • 鈼 El c贸digo queda:
const button = document.getElementById('btn');

button.addEventListener("click", async function () {
	const module = await import('./module.js');
	console.log(module);
	module.hello();
})

  • 鈥 Dentro de la carpeta es11, crear el archivo llamado: module.js
      • 鈼 El c贸digo queda:
export function hello(){
	console.log('Hola Mundo!');
}
  • 鈥 Dentro de la carpeta es11, crear el archivo llamado: index.html, al comenzar, se escribe html:5 y aparece la plantilla de html:
      • 鈼 El c贸digo queda:
<!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>
	<button id="btn">Click</button>
	<script type="module" src="06-dynamic-import.js"></script>
</body>
</html>

  • 鈥 Para ver la p谩gina del index, en el men煤 en VS Code, dar click derecho y seleccionar: Open With Live Server.
  • 鈥 Se abrir谩 una p谩gina web en blanco con el bot贸n 鈥淐lick鈥, dar click derecho y seleccionar 鈥淚nspeccionar鈥, se selecciona la pesta帽a 鈥淐onsole鈥, al presionar el bot贸n aparece el module y el mensaje de: Hola Mundo!

Mi resumen:

  • HTML
  • Module.js
  • DynamicImport.js

Otra shortcut que puedes utilizar es la siguiente signo de admiraci贸n y enter( ! )

La importaci贸n din谩mica, conocida como 鈥淒ynamic Import鈥 en JavaScript, es una caracter铆stica que te permite cargar m贸dulos de forma as铆ncrona y din谩mica en tiempo de ejecuci贸n. Esto es 煤til cuando no deseas cargar todos los m贸dulos al principio, sino que prefieres cargarlos solo cuando sean necesarios, lo que puede mejorar el rendimiento y la eficiencia de tu aplicaci贸n.

La forma b谩sica de usar la importaci贸n din谩mica es mediante el uso de la funci贸n import(). Aqu铆 tienes un ejemplo:

// Forma est谩tica de importar un m贸dulo
import { miFuncion } from './mi-modulo.js';

// Forma din谩mica de importar un m贸dulo
import('./mi-modulo.js')
  .then((modulo) => {
    // Ahora puedes usar las exportaciones del m贸dulo
    modulo.miFuncion();
  })
  .catch((error) => {
    console.error('Error al cargar el m贸dulo:', error);
  });

En este ejemplo, hemos importado un m贸dulo de forma din谩mica utilizando import(). La funci贸n import() devuelve una promesa que se resuelve cuando el m贸dulo se ha cargado con 茅xito. Luego, puedes acceder a las exportaciones del m贸dulo dentro del bloque then de la promesa.

Es importante destacar que la importaci贸n din谩mica solo se admite en entornos modernos de JavaScript, como navegadores recientes y versiones m谩s recientes de Node.js. Adem谩s, ten en cuenta que la importaci贸n din谩mica solo funciona en contexto de m贸dulos, por lo que debes estar utilizando m贸dulos en tu proyecto para aprovechar esta funcionalidad.

La importaci贸n din谩mica es 煤til en situaciones en las que deseas cargar m贸dulos de manera condicional o diferida, como en aplicaciones web que utilizan rutas y cargan m贸dulos espec铆ficos seg煤n la ruta actual del usuario.

Probe el dinamic import con dos cosas importando una clase para instanciarla y haciendo una consulta a una api, funciona fenomenal.

const button = document.getElementById('btn');

button.addEventListener('click', async ()=>{
    const module = await import('./module.mjs');
    module.hello('Chris');
    const chirs = new module.Persona('Christian', 18);
    chirs.gretting();
    const data =  await chirs.consutlta('https://jsonplaceholder.typicode.com/todos/1')
    const response =   await data.json();
    console.log(response);
    const structure = await `<h1> title ${response.title} completed task = ${response.completed} </h1>`;
    document.body.innerHTML = structure;
});
export function hello(value){
    console.log(value);
}
export class Persona {
    name = '';
    lastName = '';
    age = 0;
    constructor(name, age){
        this.name = name;
        this.age = age;
        this.lastName = 'La Cruz';
    }

    set name(name){
        this.name = name
    }
    get name(){
        return this.name
    }
    gretting(){
        console.log(`Hola mi nombre es ${this.name} y tengo ${this.age}`);
    }
    consutlta(url){
        return  fetch(url); 
    }
}

ES11: dynamic Import


La caracter铆stica 鈥渄ynamic import鈥 (importaci贸n din谩mica) fue introducida en ECMAScript 11 (tambi茅n conocido como ES2020) para permitir cargar m贸dulos JavaScript de manera din谩mica en lugar de cargarlos todos al inicio de tu programa. Esto puede ser 煤til cuando solo quieres cargar un m贸dulo cuando lo necesitas, en lugar de cargar todos los m贸dulos de una vez al principio.

Imagina que tienes una aplicaci贸n web con varias secciones, y cada secci贸n tiene su propio m贸dulo JavaScript. Antes, ten铆as que cargar todos los m贸dulos al principio, incluso si el usuario solo interactuaba con una secci贸n. Esto podr铆a hacer que la p谩gina se cargue m谩s lentamente. Con la importaci贸n din谩mica, puedes cargar el m贸dulo espec铆fico solo cuando el usuario interact煤a con esa secci贸n, lo que mejora el rendimiento y la velocidad de carga.

Aqu铆 tienes un ejemplo sencillo de c贸mo se ver铆a el c贸digo con importaci贸n din谩mica:

Supongamos que tienes dos m贸dulos: moduloA.js y moduloB.js.

// Antes (sin importaci贸n din谩mica)
// import { funcionA } from './moduloA.js';
// import { funcionB } from './moduloB.js';

// Despu茅s (con importaci贸n din谩mica)
botonA.addEventListener('click', async () => {
  const moduloA = await import('./moduloA.js');
  moduloA.funcionA();
});

botonB.addEventListener('click', async () => {
  const moduloB = await import('./moduloB.js');
  moduloB.funcionB();
});


En este ejemplo, cuando el usuario hace clic en botonA, el m贸dulo moduloA.js se cargar谩 y luego podr谩s llamar a la funci贸n funcionA(). Lo mismo ocurre con botonB y moduloB.js.

En resumen, la importaci贸n din谩mica es una caracter铆stica que te permite cargar m贸dulos JavaScript seg煤n sea necesario, en lugar de cargarlos todos al principio. Esto puede mejorar la velocidad de carga y el rendimiento de tus aplicaciones web al cargar solo lo que se necesita en ese momento.

Espero sea de utilidad. 馃懆鈥嶐煉

IMPORTACI脫N DIN脕MICA
Cargar, llamar y ejecutar bloques, m贸dulos de c贸digo, seg煤n se nesecite en tiempo de ejecuci贸n, no al cargar la p谩gina en tiempo de compilaci贸n. Hace m谩s r谩pida la p谩gina y mejora considerablemente el performance. Asegura que el usuario tenga una buena experiencia al no esperar demasiado a que la p谩gina carge.

  • Sint谩xis de promesa:
button.addEventListener("click", () => {
    //Cuando de de click a 'buton', importa a 'module.js'
    import("./module.js")
    //Cuando se hay importado ejecuta su funci贸n 'function'
    .then(modulo => {
        modulo.function()
    })
})
  • Async y await
button.addEventListener("click", async function () {
    //Cuando se de click se llama a la funcion an贸nima que trae a modulo.js y ejecuta su funci贸n 'function'
    const module = await import("./module.js");
    module.function()
})

Interesante el dynamic import. 馃挭

Otro shortcut en VSC para agregar la estructura HTML aparte de html:5 es agregar solamente ! por si a alguien le sirve =)

  • Un dato que le puede servir como shortcut ademas de escribir

(鈥榟tml:5鈥 y tab o enter)

  • Pueden simplemente colocar el signo de admiracion

(鈥!鈥 y tab o enter )

  • Ademas recordales que en el escrip ademas de agregar que es

type=鈥渕odule鈥

  • Debemos agregar la palabra reservada:

defer

  • El atributo 鈥渄efer鈥 en un script de JavaScript se utiliza para retrasar su ejecuci贸n hasta que el documento HTML se haya analizado por completo, evitando as铆 que se bloqueen otros elementos de la p谩gina y permitiendo un mejor rendimiento y experiencia de carga.

WOW, esta caracteristica de ES11 es muy util 馃槷

pregunto si todos los codigos que esta haciendo el profe estaran todos en Github

鈽笍 Minuto 9:50 presten bastante atenci贸n.

馃煣 Si no ejecutan el codigo desde Liver Server les saldran errores tal es como 鈥渂loqueos o que no se puede leer el import鈥

Seg煤n yo la etiqueta script del html no requiere usar type=鈥渕odule鈥 por que no estamos cargando el m贸dulo
de forma directa, se carga desde la funci贸n as铆ncrona que se
dispara cuando ocurre el evento del boton.

Otra cosa que ser铆a buena revisar, es el tab de network para ver como carga el archivo de JS hasta que se le da click al bot贸n

import() es una funci贸n que nos permite cargar m贸dulos de manera din谩mica en tiempo de ejecuci贸n. Esto significa que podemos cargar un m贸dulo solo cuando se necesite, en lugar de cargarlo al principio de nuestra aplicaci贸n.

La sintaxis para import() es similar a la sintaxis de importaci贸n regular, pero envuelto en una funci贸n:

import('ruta/al/modulo').then((modulo) => {
  // Utilizar el m贸dulo aqu铆
}).catch((error) => {
  // Manejar errores aqu铆
});

La funci贸n import() devuelve una promesa que se resuelve con el m贸dulo exportado una vez que se ha cargado. Podemos acceder al m贸dulo exportado dentro del then() de la promesa.

Una de las ventajas de import() es que nos permite cargar m贸dulos de manera condicional, lo que puede mejorar el rendimiento de nuestra aplicaci贸n. Por ejemplo, podemos cargar un m贸dulo solo si el usuario realiza una acci贸n espec铆fica:

boton.addEventListener('click', () => {
  import('./ruta/al/modulo').then((modulo) => {
    // Utilizar el m贸dulo aqu铆
  }).catch((error) => {
    // Manejar errores aqu铆
  });
});

Tambi茅n podemos utilizar la sintaxis de async/await para cargar m贸dulos de manera din谩mica:

async function cargarModulo() {
  try {
    const modulo = await import('./ruta/al/modulo');
    // Utilizar el m贸dulo aqu铆
  } catch (error) {
    // Manejar errores aqu铆
  }
}

Ten en cuenta que import() solo funciona en entornos que soportan m贸dulos ES6, como navegadores modernos y Node.js 10.0.0 o superior.

Espero que esto te haya sido de ayuda. 隆D茅jame saber si necesitas ayuda con algo m谩s!

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>
    <button id="Boton">Click aqui</button>
    <script type="module" src="./06_dynamic_import.js"></script>
</body>
</html>

module.js

export function hello() {
    console.log("Hola Mundo");
}

06_dynamic_import

const button = document.getElementById("Boton");

button.addEventListener("click", async function () {
    const module = await import("./module.js");
    console.log(module);
    module.hello();
})

Esta si que es una caracter铆stica GOD.
Me acuerdo que hice una web sencilla pero la habia llenado de spaguetti de JS y se hacia lenta por tanto c贸digo que le habia metido, usando esto es brutal como puedo invocar modulos a medida que el usuario navegue, las posiblidades son infinitas.

Hasta ahora entend铆 el porque de las funciones asincron铆as 馃槑馃ゲ

30/35 ES11: dynamic Import
La expresi贸n import() para manejar din谩micamente en JavaScript. Esto permite cargar los m贸dulos solo cuando el usuario los necesite, lo que hace que la p谩gina web sea m谩s r谩pida al descargar menos recursos.

//Ejemplo de importaci贸n din谩mica
const boton = document.getElementById("boton");

boton.addEventListener("click, async function () {
	const modulo = await import("./modulo.js");
	modulo.saludar();
});

En este ejemplo, se utiliza la importaci贸n dinpamica para cargar un m贸dulo llamado 鈥渕odulo.js鈥 cuando el usuario haga clic en un bot贸n. Dentro del m贸udlo hay una funci贸n llamada 鈥渟aludar鈥 que se ejecuta al hacer clic en el bot贸n. Al utilziar la importaci贸n din谩mica, se evita cargar el m贸dulo al inicio de la aplicaci贸n, lo que mejora el rendimiento.

muy buena funcionalidad!!, supongo puede servir para cargar im谩genes 馃槂

Si solo copio la ruta del archivo html y la pego en el navegador, me sale error en la consola. Desafortunadamente Platzi no me esta cargando la imagen del error.

Interesante!
Si a los primeros tres segundos una pagina no carga o no tiene una interacci贸n con el usuario podemos perder estos usuarios.

Oscar Barajas.

en VSC tambi茅n puedes utilizar el signo ! + TAB de esta forma genera la estructura HTML5, sin escribir 鈥渉tml:5鈥

Mucho m谩s r谩pido jeje.

Apunte en Notion

Rompi茅ndome la cabeza al ver que no suced铆a nada al tocar el click y al final te enteras que era en la consola > fuentes