ES7 支持 import() 动态导入语法

介绍

在 ES7 中，新增了 import() 动态导入语法，它可以让我们在运行时动态地加载一个模块，而不需要在编译时就将所有依赖的模块都加载进来。这种方式可以大大减小打包后的文件大小，提高应用的性能。

语法

import() 语法的基本形式如下：

import(moduleName)
  .then(module => {
    // do something with the module
  })
  .catch(error => {
    // handle the error
  });

其中，moduleName 是一个字符串，表示要加载的模块的路径。该路径可以是相对路径或绝对路径，也可以是一个 URL。

当 import() 方法调用成功后，它会返回一个 Promise 对象，该对象的 then 方法会接收到一个模块对象，我们可以通过该对象来访问模块的导出内容。如果加载模块失败，则 catch 方法会接收到一个错误对象。

示例

下面是一个简单的示例，我们使用 import() 方法来动态加载一个模块：

async function loadModule() {
  try {
    const module = await import('./myModule.js');
    module.myFunction();
  } catch (error) {
    console.error(error);
  }
}

loadModule();

在上面的示例中，我们使用 async/await 语法来调用 import() 方法，这样可以让代码更加简洁易读。在加载成功后，我们通过 module.myFunction() 来调用模块的导出函数。

指导意义

ES7 中的 import() 方法为我们提供了一种更加灵活的模块加载方式，它可以让我们在运行时根据需要加载模块，而不需要在编译时就将所有依赖的模块都加载进来。这种方式可以大大减小打包后的文件大小，提高应用的性能。

不过，需要注意的是，由于 import() 方法是异步加载模块的，因此在代码中使用动态导入时需要特别注意代码的执行顺序。另外，由于动态导入的模块是在运行时加载的，因此在一些特殊场景下可能会出现一些问题，需要谨慎使用。

总结

ES7 中的 import() 方法为我们提供了一种更加灵活的模块加载方式，它可以让我们在运行时根据需要加载模块，而不需要在编译时就将所有依赖的模块都加载进来。这种方式可以大大减小打包后的文件大小，提高应用的性能。但需要注意代码的执行顺序和一些特殊场景下可能出现的问题。

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