在传统的 JavaScript 中，我们无法确保异步加载的模块在何时可用，而在 ES9 中引入的动态 Import，则为解决这一问题带来了新的解决方案。
在传统 JavaScript 中的异步加载
在传统 JavaScript 中，我们使用 script 标签来异步加载 JavaScript 文件。举个例子，如果我们想要加载 lodash 这个库，我们可以这样写：
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
但无法确保该库何时可以用于我们的代码。在一些情况下，如果该库太大或网络不佳，可能会导致脚本执行时出现错误。为了解决这类问题，ES9 引入了动态 Import。
动态 Import
动态 Import 是一种异步加载模块的方式，允许您在脚本执行时动态加载模块。在 ES2015 中，我们使用静态导入来加载模块：
// 静态导入
import { foo } from './foo.js';但由于其是在代码编译时处理的，无法在代码执行时动态加载模块。不过在 ES9 中，我们可以在代码执行时动态导入模块：
// 动态导入
import('./foo.js').then(module => {
const foo = module.default;
foo();
});通过使用动态导入，可以在需要时加载模块，从而提高应用程序的性能和响应速度。在上面的代码中，我们加载了一个名为 foo.js 的模块。一旦该模块被导入，我们就可以访问其 default 导出的函数。
动态 Import 的适用场景
动态 Import 适用于以下场景：
- 加载大型代码库或框架时，可以通过按需加载来提高应用程序性能；
- 在特定条件下，例如用户交互或路由导航时，可以动态加载模块；
- 当前项目仅在某些情况下需要某个模块，可以通过动态导入来减少项目打包后的文件大小；
- 某些模块或组件仅在某些场景下需要使用，可以通过动态导入来提高可维护性。
动态 Import 的语法
动态 Import 的语法非常简单，只需要像下面这样使用 import() 方法即可：
import(moduleName)
.then(module => {
// 在这里处理动态导入的模块
})
.catch(error => {
// 处理导入出错的情况
});其中，moduleName 是我们要导入的模块的路径。与传统的静态导入不同，动态导入返回一个 Promise，而不是将模块存储在一个变量中。
动态 Import 的示例
下面是一个基本的示例，演示如何使用动态导入从其它 JavaScript 文件加载一个模块：
// 异步加载 utils.js 模块
import('./utils.js').then(module => {
console.log(module);
}).catch(error => {
console.log(error);
});在这个示例中，我们从 utils.js 文件中导入一个模块。一旦该模块被导入，我们就可以在 then() 方法中访问它。
使用动态 Import 的注意事项
虽然动态 Import 可以提高应用程序的性能和响应速度，但它也有一些注意事项：
- 动态导入不适用于所有场景。如果您的应用程序不需要动态加载模块，那么使用动态导入可能会增加代码的复杂性和维护成本。
- 动态导入只能用于 es2015 模块，无法用于 CommonJS 模块或 AMD 模块。
- 如果您使用了动态导入，请确保按照最佳实践使用模块。一个好的模块应该是可重用的、独立的，并且只做一件事情。
- 避免频繁使用动态导入，因为每次导入都会产生网络请求，从而降低应用程序的性能。
总结
ES9 中引入的动态 Import 是一种异步加载模块的方式，在需要时加载模块，从而提高应用程序的性能和响应速度。使用动态 Import，您可以按需加载代码，从而加快应用程序的启动时间和代码执行速度。虽然动态 Import 可以提高应用程序的性能和响应速度，但它也有一些注意事项需要注意。因此，在使用动态 Import 时，请确保按照最佳实践使用模块，并避免频繁使用动态导入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fa42b95b1f8cacd72c098