Unlimited WordPress themes, plugins & video downloads!

Desarrollo de software

Aprovecha las importaciones dinámicas (Dynamic Import) de JavaScript ES2020

Aprovecha las importaciones dinámicas (Dynamic Import) de JavaScript ES2020

Aprende cómo utilizar fragmentos de tu código, solo cuando lo necesites, gracias a las importaciones dinámicas y de esta forma mejora el rendimiento de tu sitio web.

La nueva versión de JavaScript ES2020 nos permite usar la sintaxis import() de forma nativa como lo haríamos en tecnologías como webpack, de esta forma podemos importar módulos externos y utilizarlos incluso dentro de condicionales o eventos.

En la mayoría de los casos cuando nuestro sitio web carga no necesitamos que todos los módulos sean cargados, cuando esto sucede solo estamos ralentizando nuestro sitio, con importaciones dinámicas podemos cargar esos módulos cuando sucedan eventos como hacer clic en un botón como veremos en el siguiente ejemplo.

Lo primero que haremos es configurar un pequeño proyecto con la siguiente estructura de carpetas y archivos.

En el archivo index.html creamos la estructura básica de HTML, dentro del body añadimos un botón con el identificador “botón” el cual usaremos más adelante para capturar el evento de clic, posteriormente llamamos el archivo “app.js”.

Si vamos al archivo app.js vemos una función que espera un evento de tipo clic sobre el botón con él, id “botón” anteriormente creado, en la segunda línea de nuestro código importamos el archivo llamado “module.js”, luego de importar nuestro módulo llamamos a la función saludar(), que está en el módulo importado.

En el módulo importado se está exportando la función saludar(), la cual envía un saludo por consola.

Para probar nuestro código abrimos el archivo “index.html” en el navegador y hacemos clic en el botón, y en consola se nos muestra el mensaje que escribimos en la función saludar().

Related posts
Desarrollo de softwareTransformación digital

5 funcionalidades que debe tener el menú digital de un restaurante

Desarrollo de softwareMarketing digital

El comercio electrónico como evolución natural de la tienda física

Desarrollo de softwareFacturación electrónica

Facturación electrónica con el software de ARRAY TIC

Desarrollo de softwareFacturación electrónica

Plazos para Facturar Electrónicamente