在现代 Web 开发中，前端技术变化越来越快，而 ECMAScript （简称 ES）标准作为 JavaScript 语言的基础，也一直在不断地发展。ES12 是最新的 ECMAScript 标准，它引入了一些非常优秀的新特性，其中最具代表性的特性之一就是动态 import。
在这篇文章中，我们会深入探讨动态 import 这一特性。首先我们会介绍 import 和 export 的基本用法，然后解释动态 import 的概念和作用。最后我们还会讨论一些实际用例，以及一些注意事项。
import 和 export 的基本用法
在深入讲解动态 import 之前，让我们首先了解一下 import 和 export 的基本用法。
export
在 JavaScript 中，我们可以使用 export 将一个函数或者变量暴露出去，让其他模块可以使用它。需要说明的是，export 的本质是声明变量或函数在模块外可以被访问到，它并不是一个真正的函数或者变量。
我们来看一个例子：
// javascriptcn.com 代码示例
// export.js
export function add(a, b) {
return a + b;
}
// main.js
import {add} from './export.js';
console.log(add(1, 2));在上面的例子中，我们首先在 export.js 文件中定义了一个 add 函数，然后我们又在 main.js 文件中使用 import 导入了这个函数。注意，在 main.js 中导入的变量需要使用 {} 包裹起来，并且需要指定来源文件的相对路径或绝对路径。
import
除了能导出变量和函数，JavaScript 还可以使用 import 导入其他模块中的变量和函数。
// javascriptcn.com 代码示例
// add.js
export function add(a, b) {
return a + b
}
// main.js
import {add} from './add.js'
console.log(add(4, 4)) // 8在上面的例子中，我们在 add.js 中定义了 add 函数，然后在 main.js 中使用 import 导入这个函数，并执行了一次。
动态 import 概念和作用
动态 import 可以让你在运行时加载模块，从而可以根据程序的运行状态决定何时才载入一个模块，而不是像常规 import 命令一样，在编译时就载入。
在编译后的 JavaScript 文件中，调用 import 时引入的模块必须是确定的，无法进行动态的判断。这些静态导入所指定的模块路径和代码位置是确定的，也就是说在编译时已经确定要引入哪些模块，这对于大型项目而言会给维护者增加很多工作量。
而动态导入可以帮助我们动态引入模块，可以节省加载时间和内存，特别是在应用程序变得越来越复杂的情况下。模块的懒加载也是动态 import 的一种应用方式，即在需要的时候再去引入模块。
以下是一个例子：
(async function() {
if (condition) {
const module = await import('./myModule.js');
module.doStuff();
}
})();在上面代码中，import 语句是动态的，只在满足条件才会执行。
实际用例和注意事项
除了懒加载模块之外，动态 import 的用途还很广泛，以下是一些例子：
- 动态加载多语言资源
- 动态加载不同的视图或界面
- 动态加载某个功能或插件
需要注意的是，动态 import 的返回值是一个 Promise 对象，它的状态由所加载的模块的状态决定。当模块加载成功后，返回值是一个包含了所有导出内容的对象，我们可以通过对象属性进行访问。
此外，在动态 import 的时候，我们需要注意一些问题：
- 动态 import 只能在支持 ES6 的浏览器或环境中使用
- 在使用动态 import 时，应该将导入函数使用
async/await包裹，以便能够使用 Promise 异步加载 - 动态 import 在调用时需要一个路径作为参数，这个路径可以是一个字符串（相对或绝对），也可以是一个包含字符串的变量或表达式
总结
动态 import 是 ES12 中增加的一项非常有价值的特性，它可以对前端工程提供很大的便利，尤其是在应用程序变得越来越复杂的情况下。通过本文的学习，我们了解了动态 import 的基本概念和使用方法，也讨论了一些实际用例和注意事项。希望本文能够对你在日常开发中运用动态 import 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6537661a7d4982a6ebfe5c34