No tienes acceso a esta clase

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

Reg谩late acceso ilimitado a todos los cursos por 1 a帽o a precio especial de Navidad 馃巹

Antes: $199

Currency
$149/a帽o
reg铆strate

termina en:

16D
14H
57M
21S

ES11: dynamic Import

33/38
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 9

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Hola [email protected] 馃槂
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

馃ス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.

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

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.

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