Importaciones dinámicas y condicionales | Programar Plus

0

Con los módulos ES, puede import otro JavaScript. Como confeti, duh:

import confetti from 'https://cdn.skypack.dev/canvas-confetti';
confetti();

Ese import La declaración solo se ejecutará. Sin embargo, hay un patrón para hacerlo de forma condicional. Es como esto:

(async () => {
  if (condition) {
    // await import("stuff.js");

    // Like confetti! Which you have to import this special way because the web
    const { default: confetti } = await import(
      "https://cdn.skypack.dev/[email protected]"
    );
    confetti();
  }
})();

¿Por qué? Cualquier tipo de condición, supongo. Puede verificar la URL y cargar solo ciertas cosas en ciertas páginas. Solo podría estar cargando ciertos componentes web en determinadas condiciones. No se. Estoy seguro de que puedes pensar en un millón de cosas.

La carga condicional y responsable es otra idea. Aquí solo se carga un módulo si saveData no está encendido:

(Visited 9 times, 1 visits today)