Uso de Dynamic Import en JavaScript para Mejora de Rendimiento Web

Clase 30 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

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).

Yuli Alexandra Pulido Castañeda

student•

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();
})

Felix Torres Javier Antonio

student•

Gracias por el aporte

Jason Steven Méndez Balambá

student•

Me salvaste la pereza JAJA kidding y gracias again <3

Zajith Corro Viveros

student•

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();
});

José Antonio Mandujano Velázquez

student•

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

VICTOR CAUDILLO

student•

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

Julian Franco

student•

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

Richard Pascual Huallpa Yapo

student•

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.

Arnoll Bermudez

student•

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.

Teo Zavala

student•

Esta clase me gusto mucho.

silfredo mario

student•

🥹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.

Eliezer Hernandez

student•

¿Aquellos archivos que realizan importaciones dinamicas, tambien deben establecerse con la extension mjs?

Williams Antonio Hernandez Ardila

student•

con extenson .js

Maria Gabriela Rodriguez Cuevas

student•

💼 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 “Click”, dar click derecho y seleccionar “Inspeccionar”, se selecciona la pestaña “Console”, al presionar el botón aparece el module y el mensaje de: Hola Mundo!

Eduardo César Henao Echeverri

student•

No se puede importar dinamicamente solo la función hello y ejecutarla?

Zajith Corro Viveros

student•

Al final el import te regresa un objeto, entonces lo que puedes hacer es un destructuring del objeto para acceder a la función 🤩

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

// main.js
const button = document.getElementById("btn");

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

Freddy Aldair Muñoz Huasasquiche

student•

Si podrias, pero al usar Async/await puedes mostrar otras secciones de tu pagina y solo llamar a esta funcion cuando lo necesites, asi no sobrecargas el inicio de tu web cuando los usuarios ingresen por primera vez .

Jesus Eduardo Castillo Saavedra

student•

La importación dinámica, conocida como "Dynamic 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.

Ricardo Alfonso Chavez Vilcapoma

student•

Mi resumen:

HTML

Module.js

DynamicImport.js

Estuardo Leonel Lopez Par

student•

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.

Luis Alfredo Suarez

student•

ES11: dynamic Import

La característica "dynamic 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. 👨‍💻

edgar zambrano

student•

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

JOSE Alonso Tocas Dipaz

student•

Tengo este problema, a lo que entiendo, es por que uso wsl ubunto y no permite la trasnferencia de datos el navegador

Ricardo Alfonso Chavez Vilcapoma

student•

Sería bueno que compartas tu code amigo.

Woldev S.A.S

student•

¿Qué es más óptimo en rendimiento? ¿Importar otros códigos (scripts) locales a un único script en mi HTML o anexar múltiples códigos locales a mi HTML? Espero se entienda la pregunta.

Luis Eduardo Rodríguez Ramírez

student•

Te refieres a en lugar de hacer las importaciones múltiples dentro de un archivo js, hacerlas con etiquetas <script src="" /> ?

Woldev S.A.S

student•

Correcto. Pero ya a medida que estudio me estoy dando cuenta que el estándar (y lo más óptimo) es definir un solo .JS como principal y en este importar todos los scripts requeridos... En una clase de producción modular. ¿Tiene sentido lo que digo?

Jonathan Garcia

student•

excelente Clase 👏

Uso de Dynamic Import en JavaScript para Mejora de Rendimiento Web

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6

Playground: Obtén una lista de películas

Generators en JavaScript: Cómo implementar y usar iteradores personalizados

Playground: Generador de identificadores para michis

Método ADD en ECMAScript 6: Agregando Elementos a un Set

¿Qué se implementó en ES7?

Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes

¿Qué se implementó en ES8?

Métodos Object.Entries y Object.Values en ECMAScript 8

Manipulación de Strings y Arrays en ECMAScript 8

Async y Await en JavaScript: Controlando el Asincronismo

¿Qué se implementó en ES9?

Novedades de ECMAScript 9: Regex y Spread Operator en JavaScript

Manejo de Finally y Async en ECMAScript 9

¿Qué se implementó en ES10?

Novedades de ECMAScript 10: Métodos flat y trim en JavaScript

Manejo de Errores y Transformaciones de Arrays en JavaScript

¿Qué se implementó en ES11?

Uso de Optional Chaining en JavaScript ES11

Manejo de BigInt y operadores nullish en JavaScript

Promesas en ECMAScript 11: Uso de Promise.allSettled

Uso de Global Disk y Match All en JavaScript