ES11 中如何通过动态 import() 导入模块并使用

在前端开发中，模块化已经成为不可或缺的一部分，而 ES6 的模块化的引入来使得前端开发变得更加规范化。但是，在某些情况下我们不想在一开始就加载所有的模块，而是通过需要的时候在进行加载。ES11 中推出的动态 import() 正好解决了这个问题。

动态 import() 是什么

通常情况下，我们在 ES6 中使用静态的 import 关键字来导入模块：

import { foo } from './foo.js';

但是，静态的 import 是在编译阶段进行处理的，也就是说模块的导入在脚本加载的时候就已经完成了。而动态的 import() 是在运行时进行处理的，可以使我们根据需要动态地加载模块。

在 ES11 中，我们可以使用如下语法来调用动态导入：

import('./foo.js')
  .then(foo => {
    // 使用 foo 模块
  })
  .catch(error => {
    // 处理错误
  });

动态的导入语法遵循 Promise 的标准，我们可以在 then 中得到导入的模块，并进行使用。如果导入失败则可以在 catch 中进行错误处理。

动态 import() 的优势

使用动态 import() 的最大优势就是能够根据需要动态地加载模块，避免了一些不必要的开销。

比如，如果我们在应用中需要使用某个模块，并且这个模块很大，但是在用户首次访问应用的时候并不需要用到这个模块，直到用户进行某个操作后才需要用到这个模块，这时候如果我们一开始就将整个模块加载进来，会导致用户界面的长时间卡顿。而使用动态 import() 则可以做到需要时再加载，避免了不必要的开销。

另外，动态 import() 还可以使我们在某些情况下根据不同平台来导入不同的模块。比如，我们可以根据不同的浏览器来动态导入不同的 polyfill。

如何使用动态 import()

在实际使用中，我们可以将某个模块的导入封装在一个函数中，并在需要用到这个模块的时候进行调用。下面是一个示例：

function handleClick() {
  import('./foo.js')
    .then(foo => {
      foo.default();
    })
    .catch(error => {
      console.error('Failed to load foo', error);
    });
}

在上面的示例中，我们将导入封装在 handleClick 函数中，在用户点击时加载 foo 模块。

总结

动态 import() 在 ES11 中推出，它可以让我们在需要的时候加载模块，避免了一些不必要的开销。在实际使用中，我们可以将某个模块的导入封装在一个函数中，并在需要用到这个模块的时候进行调用。

谨记，动态 import() 返回的是一个 Promise，所以我们应该在 then 中使用导入的模块。另外，在 catch 中我们需要进行错误处理。

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