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 是异步的，如果在加载模块期间执行了其他的代码，那么这些代码会在模块加载完成后立即执行：
-- -------------------- ---- -------
---------------------
---------------------
-------------- -- -
-- ------ --------
--
-------------- -- -
-- ----
---
-------------------执行上述代码，可以得到以下结果：
start end // ... 一段时间后 // 来自我们加载的模块
动态 import 还可以结合 async/await 使用：
-- -------------------- ---- -------
----- -------- ------------- -
--- -
----- ------ - ----- ----------------------
-- ------ --------
- ----- ------- -
-- ----
-
-
--------------总结
静态 import 和动态 import 都是 ES11 中新增的标准，它们有着不同的用途和优点：
- 静态 import：用于静态加载模块，便于代码智能提示；
- 动态 import：用于动态加载模块，在一些不确定加载哪些模块的时候可以使用。
不管是静态 import 还是动态 import，都是模块加载时的一种较为高效的方式，但是请注意，这只适用于较新的浏览器或者比较新的 Node 环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65acb324add4f0e0ff6492af