ES11 中的静态 import 与动态 import 是什么？-JavaScript中文网-JavaScript教程资源分享门户

ES11 中新增了静态 import 和动态 import 两种方法，首先需要了解的是 import 是 ECMAScript 的一种模块加载机制，用于从外部模块加载对应的模块、变量和函数等，而静态 import 和动态 import 则是加强版的模块加载方法，本篇文章将会深入讲解它们的用途和差异。

静态 import

静态 import 的主要优点是：在引入模块的时候可以进行静态分析，便于 IDE 智能提示，在代码量较大时，可以帮助开发人员更快速地定位到需要的模块，提高代码的可读性。

静态 import 的用法：

import { name } from './module.js';

在上述代码中，我们可以通过 import 关键字引入名为 name 的组建，并且从 ./module.js 文件中进行加载。

静态 import 还可以使用 import * as 进行批量加载：

import * from './module.js';

其中，* 表示全部导入。

动态 import

动态 import 的优点是可以在代码运行时动态加载模块，如果无法确定加载哪些模块时，可以选择使用动态 import。

动态 import 的用法：

import('./module.js')
  .then((module) => {
    // module 是我们加载的模块
  })
  .catch((error) => {
    // 捕获错误
  });

动态 import 内部使用的是 Promise，所以可以进行链式编程，即可以在 .then() 里继续添加代码逻辑。

需要注意的是，动态 import 是异步的，如果在加载模块期间执行了其他的代码，那么这些代码会在模块加载完成后立即执行：

// javascriptcn.com 代码示例
console.log('start');
import('./module.js')
  .then((module) => {
    // module 是我们加载的模块
  })
  .catch((error) => {
    // 捕获错误
  });
console.log('end');

执行上述代码，可以得到以下结果：

start
end
// ... 一段时间后
// 来自我们加载的模块

动态 import 还可以结合 async/await 使用：

// javascriptcn.com 代码示例
async function asyncImport() {
  try {
    const module = await import('./module.js');
    // module 是我们加载的模块
  } catch (error) {
    // 处理错误
  }
}

asyncImport();

总结

静态 import 和动态 import 都是 ES11 中新增的标准，它们有着不同的用途和优点：

静态 import：用于静态加载模块，便于代码智能提示；
动态 import：用于动态加载模块，在一些不确定加载哪些模块的时候可以使用。

不管是静态 import 还是动态 import，都是模块加载时的一种较为高效的方式，但是请注意，这只适用于较新的浏览器或者比较新的 Node 环境。

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