动态、条件导入 | CSS-Tricks

借助 ES 模块，您可以原生 import 其他 JavaScript。就像彩带，当然了

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

该 import 语句只是会运行。不过，有一种模式可以有条件地执行它。就像这样

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

为什么？任何类型的条件，我想。您可以检查 URL，只在特定页面上加载某些内容。您也可以只在特定条件下加载某些 Web 组件。我不知道。我敢肯定你可以想到一百万件事。

负责任的条件加载是另一个想法。这里只在 saveData 不存在的情况下加载模块

Joe Pea

# 2021 年 1 月 13 日

顶层 await 将在 Chrome（Chromium）89 中默认启用！这意味着代码示例不需要异步包装函数

import 'whatever'

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

  confetti();
}

export const whatever = 'whatever'

示例笔

Jeremy

# 2021 年 1 月 13 日

我们在工作中的项目中使用它进行代码拆分，如上所述，更改全面提高了性能，并且我们看到随着我们将它回滚到客户的旧项目中，效果显著。

Taufik Nurrohman

# 2021 年 1 月 13 日

您也可以只在特定条件下加载某些 Web 组件。

我在考虑为客户端语法高亮器使用动态语言加载器。

Kim Johannesen

# 2021 年 1 月 14 日

大约在 2010 年，我曾经使用过一种非常基本且根本不可靠的方法来“条件加载”jQuery 插件 - 逻辑是这样的（请原谅任何语法错误。我已经很久没有编写 jQuery 了）

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

这样，我可以有条件地加载诸如图像滑块之类的内容，并避免将它们作为巨大的 site.js 文件的一部分。

jocabrer

# 2021 年 1 月 15 日

非常感谢，我希望我能使用它，我不知道彩带，它非常适合检查这个人是否在生日并显示

此评论线程已关闭。如果您有重要的信息要分享，请联系我们。