如何更好地使用 ES11 中的 import() 异步加载模块-JavaScript中文网-JavaScript教程资源分享门户

在过去，我们经常使用 CommonJS 或者 AMD 格式进行模块化的开发。但是随着 ES6 的正式发布，它提供了一种更加优雅的方式来实现模块化：ES6 模块。

ES6 模块提供了更好的类型支持和静态分析。但是 ES6 模块也有一些限制，比如不能在运行时动态加载模块。这时候 ES11 的 import() 就成了一个很好的选择。

import() 的基本使用

下面是一个简单的代码示例，演示了如何使用 import() 动态加载模块：

async function main() {
  const math = await import("./math.js");
  console.log(math.add(1, 2)); // 输出 3
}

main();

从示例代码中可以发现，我们可以使用 await 关键字来等待模块加载完成。另外，需要注意的是，import() 返回的是一个异步加载的 Promise。

import() 的优点

相比于静态导入，import() 可以为我们提供更好的灵活性和动态性。

延迟加载

当我们使用静态导入时，我们需要在模块的开头导入所有的依赖项。这可能会导致某些依赖项很长时间没有被使用，而浪费资源。实际上，有些代码路径可能永远不会被执行到。

而 import() 可以让我们在需要的时候在异步地加载模块，这样就可以避免预加载所有内容，从而减小应用程序的启动时间并降低资源使用率。

减小总代码量

可以通过 import() 延迟加载代码，从而避免加载全部代码。当浏览器需要某些代码段时，它可以通过 import() 载入所需代码。这样可以减少总代码量，提高下载速度和网站性能。

异步加载

import() 提供了异步加载模块的机制，该机制可用于在应用程序的运行时异步加载、录入代码，而不需要在网站启动时一次性加载所有代码。

这种独立加载策略具有一个明显的好处，即使裁剪代码包含了站点某些组件的代码，也不会造成网站功能的损失，因为这些需要的代码已经被异步加载。

import() 的缺点

除了优点外，也需要注意它的缺点。

非同步性

如果某个 JavaScript 文件依赖于导入的模块，并且我们在代码中异步载入该模块，在加载完成之前，该文件将无法正确执行。

这使得我们必须非常小心地编写异步代码，以确保所有依赖项都已经加载完毕。

额外的开销

像其他异步 API 一样，import() 涉及到网络请求、代码编译和执行，这可能会对应用程序的响应时间产生影响。

另外，import() 需要支持 Promise、异步函数和异步迭代器。这增加了代码库的大小，可能会使应用程序的初始下载时间增加。

针对老浏览器的兼容

有些浏览器不支持 import() 功能。这样导致了前端开发者需要在代码库中包含导入功能的回退代码，以便在旧浏览器中正确执行应用程序。

总结

import() 是一个强大的工具，它在 JavaScript 的模块系统中提供了动态加载的机制，从而使代码无论什么时候都能够被异步地加载。

虽然它带来了一些额外的复杂性和性能损失，但总体上，它让我们可以在开发时实现更大的灵活性和动态性。如果你想要优化你的应用程序的性能，或者需要运行时加载代码，那么 import() 将成为一个非常好的工具。

最后，这里提供一个通过 import() 加载不同的代码示例：

// javascriptcn.com 代码示例
const btnA = document.querySelector(".btnA");
const btnB = document.querySelector(".btnB");

btnA.addEventListener("click", async () => {
  const { doSomething } = await import("./moduleA.js");
  doSomething();
});

btnB.addEventListener("click", async () => {
  const { doSomething } = await import("./moduleB.js");
  doSomething();
});

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65371cf67d4982a6ebf746de