在 ES11 中使用 Dynamic Import 加载 JS 文件

在前端开发中，我们经常需要加载 JavaScript 文件来实现一些功能，但是在传统的方式中，我们需要在页面加载时将所有必要的 JavaScript 文件都下载下来，这会影响网页的加载速度。在 ES11 中，我们可以使用 Dynamic Import 来按需加载 JavaScript 文件，从而提高网页加载速度。

Dynamic Import 是什么？

Dynamic Import 是 ES11 中新增加的一个功能，可以让我们在 JavaScript 运行时动态地导入模块。使用 Dynamic Import 加载 JavaScript 文件可以避免一开始就将所有的模块下载下来，而是只在需要的时候再下载，从而提升网页的加载速度。

如何使用 Dynamic Import？

Dynamic Import 的语法非常简单，我们只需要在需要导入模块的地方使用以下语法即可：

import(moduleName)
  .then((module) => {
    // 使用模块
  });

其中，moduleName 是一个字符串，表示需要导入的模块的路径。当 JavaScript 引擎执行到这个语句时，会先下载指定路径的模块，然后将模块导入到当前的作用域中。

需要注意的是，import() 方法返回一个 Promise，我们需要使用 .then() 方法来获取导入的模块。

Dynamic Import 的使用场景

Dynamic Import 可以用于按需加载 JavaScript 文件，比如在页面某个地方需要使用一个特定的模块时，我们可以使用 Dynamic Import 实现懒加载，只在需要的时候加载指定的 JavaScript 文件。

以下是一个示例代码：

// javascriptcn.com 代码示例
// 动态导入模块
import('./module.js')
  .then((module) => {
    // 使用模块
    module.func();
  })
  .catch((err) => {
    console.error('模块加载失败', err);
  });

在上面的代码中，我们使用 import('./module.js') 加载了一个名为 module.js 的 JavaScript 文件，在文件加载完成后，我们通过 .then() 方法回调函数，对该模块进行了使用。

总结

使用 Dynamic Import 可以帮助我们实现按需加载 JavaScript 文件，避免了一开始就将所有的 JavaScript 文件下载下来，从而提升了网页的加载速度。需要注意的是，Dynamic Import 是 ES11 中新增的功能，目前并不是所有的浏览器都支持，因此在使用 Dynamic Import 时需要注意浏览器的兼容性。

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