随着 Web 技术的快速发展，前端领域的技术也不断地更新换代。在 2019 年发布的 ECMAScript 10（ES10）中，新增了一项非常重要的功能，即动态 import() 函数。本文将详细介绍该函数的用法、意义和示例代码。
1. 动态 import() 函数是什么？
import() 函数是一个异步加载模块的新方法，它返回一个 Promise 对象，可以根据需要加载一个或多个模块，在运行时动态地引入它们的代码。与传统方式的 import 不同的是，import() 函数可以在运行时执行，而非在文档的头部静态引入。
2. 动态 import() 函数的语法
动态 import() 函数的语法非常简单明了，其基本格式如下：
import(modulePath)
.then(module => {
// 模块加载成功，可以使用模块中的内容了
})
.catch(error => {
// 模块加载失败，处理错误
});其中，modulePath 表示需要加载的模块的路径。该路径可以是绝对路径或相对路径，也可以是一个 URL 地址。需要注意的是，该路径是一个字符串，可以直接写死在代码中，也可以根据运行时的不同条件进行动态拼接。
3. 动态 import() 函数的意义与好处
相比传统的静态 import 语句，动态 import() 函数具有如下优势：
（1）延迟加载
传统的 import 语句在加载时就会将所有的依赖模块全部加载进来，这会导致网页的初始加载时间变长。而动态 import() 函数则可以做到在运行时根据需要进行加载，从而减少初始加载时间，提升用户体验。
（2）条件加载
动态 import() 函数还可以根据运行时的不同条件进行选择性的加载。例如，可以根据用户的语言环境、设备屏幕大小或者网络带宽等条件来动态地加载不同的模块，从而实现最佳的使用体验。
（3）代码分割
动态 import() 函数还可以帮助开发者更好地实现代码分割。如果应用的某些功能只会在特定的场景下才会被使用，那么可以将其划分为一个单独的模块，然后在需要的时候再进行加载。这样做可以大幅减少主应用的代码量，从而提高应用的性能和可维护性。
4. 动态 import() 函数的示例代码
下面我们通过一个具体的示例来介绍动态 import() 函数的用法。
（1）基本用法
// javascriptcn.com 代码示例
// 加载一个模块
import('./exampleModule.js')
.then(module => {
// 调用模块中的函数
module.exampleFunction();
})
.catch(error => {
console.log('模块加载失败', error);
});（2）使用变量加载模块
// javascriptcn.com 代码示例
// 根据变量值加载不同的模块
const moduleTag = 'exampleModule';
import(`./${moduleTag}.js`)
.then(module => {
// 调用加载的模块中的函数
module.exampleFunction();
})
.catch(error => {
console.log('模块加载失败', error);
});（3）条件加载模块
// javascriptcn.com 代码示例
// 根据设备屏幕大小选择性加载模块
const screenWidth = window.screen.width;
let moduleTag = '';
if (screenWidth < 768) {
moduleTag = 'exampleModuleMobile';
} else {
moduleTag = 'exampleModuleDesktop';
}
import(`./${moduleTag}.js`)
.then(module => {
// 调用加载的模块中的函数
module.exampleFunction();
})
.catch(error => {
console.log('模块加载失败', error);
});5. 总结
动态 import() 函数是 ES10 中非常重要的一项新特性，它可以帮助开发者更好地延迟、条件和按需加载模块，从而提高应用的性能和可维护性。同时，动态 import() 函数还可以更优秀地实现代码分割，使得应用的代码更加健壮和灵活。在实际开发中，我们可以灵活使用动态 import() 函数，为应用带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544b5ea7d4982a6ebe8c48e