Cómo importar dinámicamente JavaScript con mapas de importación
La importación dinámica en las páginas web se realiza a través de una característica llamada mapas de importación. Aprenderá sobre la carga dinámica, el comportamiento de la herramienta de compilación predeterminado y el uso de mapas de importación con un ejemplo paso a paso. Empecemos.
Comportamiento de herramienta de compilación predeterminado
Por defecto, cuando ejecuta una página web HTML y todos los scripts que se incluyen dentro de él se compilan dentro de un archivo grande. Todas las bibliotecas externas e internas se cargan instantáneamente en la memoria (servidor) y se agrega mucha complejidad al proyecto debido a la carga de varios fragmentos de código externo al mismo tiempo.
Anteriormente, las aplicaciones de JavaScript eran muy simples y básicas, pero a medida que pasa el tiempo, las aplicaciones se están volviendo cada vez más desafiantes y complejas, y es exactamente por qué cargar todas las bibliotecas externas al mismo tiempo incluso antes de que sean necesarias no es una solución eficiente. Ahí es donde la carga dinámica y la modularidad de los guiones son útiles.
Carga dinámica
Como el nombre lo indica, es el proceso de cargar bibliotecas y scripts externas solo cuando se necesitan, eso es en tiempo de ejecución. En lo que respecta al script de la aplicación web, la carga dinámica de script se realiza mediante una función en ES6 llamada módulos en el que los scripts se dividen en componentes más pequeños. Del mismo modo, la importación también se realiza en tiempo de ejecución utilizando mapas de importación.
Para cargar las importaciones en el tiempo de ejecución, utilizamos una función llamada mapas de importación, Esta característica nos permite anular el procedimiento predeterminado de las herramientas de compilación y Carga lenta nuestras importaciones/bibliotecas; Carga perezosa significa cargar solo cuando sea necesario.
Para demostrar que la importación de scripts externos dinámicamente en una página web, configurará una página web que realice una tarea simple, luego, vamos a importar una biblioteca/paquete externo LOdash y utilizaremos su función para realizar la misma tarea
Nota: Necesita un editor de código (preferiblemente vs código) para esto y nodejs,
Paso 1: Configuración de un HTML y un archivo de script
Para demostrar el uso de mapas de importación para la carga dinámica, requeriremos que se instalen NodeJs en nuestro sistema, haga clic aquí para leer la instalación de NodeJS.
Cree una carpeta en su máquina y abra esa carpeta con el código VS (o su editor de código deseado) como se muestra a continuación:
Dentro de la carpeta, cree un archivo HTML llamado hogar.html y un archivo de script como guion.js:
Vamos a mostrar algunas palabras usando el archivo de script. Entonces, en el archivo HTML, agregue la siguiente etiqueta de script.
Nota: estamos usando el tipo propiedad y estableciéndolo igual a módulo Para notificar al navegador que este es un script modular.
Ahora, dentro del archivo de script, escriba las siguientes líneas de código para imprimir texto en la página web HTML.
const el = documento.createElement ('P');Const Words = "Linux, Sugerencia, Tutorial!";
Const Text = Documento.createtextnode (palabras);
El.appendChild (texto);
documento.cuerpo.appendchild (El);
Para ejecutar el archivo, abra el terminal del código VS y escriba "Servir NPX", Si es la primera vez que pruebe el comando NPX Serve, entonces podría instalar el"atender"Paquete y solicite afirmación, y luego iniciará la instalación:
Después de eso, el comando NPX Serve nos mostrará dónde se está alojando nuestra página web HTML, así que haga clic en el enlace de la siguiente manera:
Cuando abra el enlace http: // localhost: 3000 verá la siguiente salida:
Paso 2: Importar biblioteca externa
Vamos a importar caja de inicio método del lodash biblioteca y use este método de inicio para convertir nuestras cadenas en "iniciar el caso" con el siguiente código:
Importar StartCase desde '@lodash/startcase';Nota: iniciar el tipo de caso significa que cada palabra tendrá la primera letra en un caso capital.
Va a modificar el archivo de script como:
Importar StartCase desde "@lodash/startcase";const el = documento.createElement ("P");
const tOdisplay = "Linux, Sugerencia, Tutorial!";
Const Text = Documento.CreateTeTextNode (startcase (Todisplay));
El.appendChild (texto);
documento.cuerpo.appendchild (El);
Como puede ver, el código es un poco diferente, estamos pasando el Extraer variable a la caja de inicio función.
Actualice la página y verá el siguiente error en su consola de desarrollador:
Esto se debe a que el navegador no sabe qué hacer con esta declaración de importación al comienzo del script
archivo. El navegador está tratando de encontrar el lodash Paquete en el servidor web local, este es también el comportamiento predeterminado de la herramienta de compilación. Para cambiar esto, usamos mapas de importación en archivos HTML.
Paso 3: Uso de mapas de importación
Importar mapa, es una función ES6, contiene un par de valor clave, siendo la clave el nombre de la importación y el valor es la ubicación de la importación.
La sintaxis del El mapa de importación es:
Para nuestro caso, agregamos la siguiente etiqueta de script que incluye el mapa de importación:
Nota: La etiqueta de script que contiene el mapa de importación se debe agregar antes de la etiqueta de script que contiene el tipo modular.
Después de agregar estas líneas, actualice su página web y debería ver la salida:
Como puedes ver, el caja de inicio El método convirtió con éxito nuestras palabras de cadena en el tipo "iniciar el caso". Ahora incluye bibliotecas externas dinámicamente y podemos examinar la carga perezosa en las herramientas de desarrollador del navegador.
Paso 4: Examina la carga perezosa
Abra la consola de desarrollador del navegador y diríjase a la pestaña de red.
Debajo de la cascada, puede ver qué guión estaba cargando a qué hora:
Y desde aquí puedes ver claramente que todos los guiones no estaban cargados al comienzo, se cargaron perezosamente en el momento de ejecución.
Conclusión
En JavaScript, la importación dinámica se realiza mediante una característica llamada Mapas de importación. La importación dinámica significa anular el comportamiento predeterminado de las herramientas de compilación e importar bibliotecas externas cuando se necesitan en el momento de ejecución porque a veces necesita una biblioteca en una sola parte de su aplicación web y no las otras. Las herramientas de compilación predeterminadas cargarán todas las bibliotecas en un archivo grande que causará un aumento en el consumo de memoria. Ha aprendido a usar los mapas de importación para cargar bibliotecas externas de carga perezosa con un ejemplo y lo examinado en la consola del desarrollador.