Dynamische, bedingte Importe

Mit ES Modules können Sie nativ andere JavaScript-Dateien importen. Wie Konfetti, klar

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

Diese import-Anweisung wird einfach ausgeführt. Es gibt jedoch ein Muster, um sie bedingt auszuführen. Es ist so ähnlich

(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/canvas-confetti@latest"
    );
    confetti();
  }
})();

Warum? Jede Art von Bedingung, nehme ich an. Sie könnten die URL überprüfen und bestimmte Dinge nur auf bestimmten Seiten laden. Sie könnten bestimmte Webkomponenten nur unter bestimmten Bedingungen laden. Ich weiß nicht. Ich bin sicher, Ihnen fallen tausend Dinge ein.

Verantwortungsvolles, bedingtes Laden ist eine weitere Idee. Hier wird ein Modul nur geladen, wenn saveData nicht aktiviert ist

Kommentare

Joe Pea

# 13. Januar 2021

Top-Level await wird in Chrome (Chromium) 89 standardmäßig aktiviert sein! Das bedeutet, dass das Codebeispiel keine asynchrone Wrapper-Funktion benötigt

import 'whatever'

if (condition) {
  const { default: confetti } = await import(
    "https://cdn.skypack.dev/canvas-confetti@latest"
  );

  confetti();
}

export const whatever = 'whatever'

Beispiel-Pen

Jeremy

# 13. Januar 2021

Wir verwenden es in unseren Projekten bei der Arbeit für Code Splitting, wie oben erwähnt. Die Änderung hat die Gesamtleistung erheblich verbessert und wir sehen riesige Ergebnisse, da wir sie zurücknehmen und in ältere Projekte für Kunden einrollen.

Taufik Nurrohman

# 13. Januar 2021

Sie könnten bestimmte Webkomponenten nur unter bestimmten Bedingungen laden.

Ich denke über einen dynamischen Sprach-Loader für einen clientseitigen Syntax-Highlighter nach.

Kim Johannesen

# 14. Januar 2021

Um 2010 herum habe ich "bedingtes Laden" von jQuery-Plugins durchgeführt, mit einer sehr rudimentären und keineswegs bulletproof-Methode – die Logik war ungefähr so (und bitte verzeihen Sie eventuelle Syntaxfehler. Ich habe lange kein jQuery mehr geschrieben)

if($(".element-that-required-plugin").length > 0) {
  $.ajax({
    url: "path/to/plugin.js",
    }
  })
  .done(function() {
    // initialise plugin
  });
}

Auf diese Weise konnte ich Dinge wie Bildschieberegler bedingt laden und vermeiden, dass sie Teil einer riesigen site.js-Datei sind.

jocabrer

# 15. Januar 2021

Vielen Dank, ich hoffe, ich kann es nutzen. Ich kannte Konfetti nicht, es ist perfekt, um zu prüfen, ob die Person Geburtstag hat und es anzuzeigen

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.