Importations dynamiques et conditionnelles | Astuces CSS

Online Coding Courses for Kids

Avec Modules ES, vous pouvez nativement import autre JavaScript. Comme des confettis, duh:

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

Cette import la déclaration est juste va courir. Il existe cependant un modèle pour le faire conditionnellement. C’est comme ça:

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

Pourquoi? N’importe quelle sorte de condition, je suppose. Vous pouvez vérifier l’URL et ne charger que certaines choses sur certaines pages. Vous ne pouvez charger certains composants Web que dans certaines conditions. Je ne sais pas. Je suis sûr que vous pouvez penser à un million de choses.

Le chargement responsable et conditionnel est une autre idée. Nous ne chargeons ici un module que si saveData n’est pas activé:

Close Menu