在前端开发中，模块化一直是一个非常重要的话题。在 ES6 中，引入了新的模块化系统，通过关键字 export 和 import 来实现。与 CommonJS 或 AMD 相比，ES6 的模块化具有更好的静态分析、更好的灵活性以及更好的兼容性。但是ES6模块化的缺点是，无法像 CommonJS 或 AMD 那样在运行时加载模块，而是必须在代码运行前进行静态分析，再进行加载，这就使得一些动态加载的需求得不到很好的满足。
在 ECMAScript 2021 (ES12) 中，新增了 Module 的动态 import，可以在运行时加载模块，大幅增强了 JavaScript 的模块化能力。
动态 import
ES6 的 import 命令只能在静态情况下使用。也就是说，在编译阶段就能确定模块的依赖关系，而不能在运行时根据需要动态加载。
ES2020 标准引入了由 Promise 对象返回的 import() 函数，可以实现动态加载。该函数的参数是一个字符串，代表模块路径，返回一个 Promise 对象。这个 Promise 对象会在模块加载完成后，自动回调其 then 方法，如果加载失败，会回调 catch 方法。
import('./myModule.js')
.then((module) => {
// do something
})
.catch((error) => {
// do something
});所以，如果要在代码运行时才能确定模块的依赖关系，或者需要异步加载模块，就可以使用动态 import。
module 和 import.meta.url
动态 import 使得我们能够在代码运行时动态引入模块。除此之外，ES2021 还新增了一个全局变量 module，可以用来访问当前模块的信息。
module 对象可以获取到模块的一些信息，比如模块的路径、模块的导入和导出等。其中，模块的路径可以通过 module 对象的 import.meta.url 属性获得。
console.log(import.meta.url); // 打印当前模块的绝对路径
实现动态加载
下面的示例代码演示了如何使用动态 import 和 module 实现动态加载依赖的模块：
-- -------------------- ---- ------- ----- -------------- - ----- ------------ -- - ----- ---- - --------------------- ----- - -------- --- - - ----- ------------- ------ ---- -- ----- ------ - ----- -- -- - ----- --- - ----- ------------------------------- ------------------ -- ---------
示例代码中，loadDependency 函数动态加载参数所对应的模块，并返回 default 导出。这里使用 await 关键字等待模块加载完成，可以保证模块的正确性。
使用动态加载也解决了 CommonJS 模块化中造成的严重问题，不用担心在运行前所有代码都没有加载完毕。考虑到动态加载可能会在较慢的网络环境中时不及时回应，需要注意程序的性能和延迟。
总结
ECMAScript 2021 (ES12) 引入的动态 import 和 module 对象，为 JavaScript 模块化提供了更好的灵活性和可扩展性，同时也为前端开发者提供了更多的实现选择和最新的特性。在开发过程中，可以根据具体的业务场景以及代码特点选择合适的模块加载方式，不断优化代码的性能和延迟。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652de0197d4982a6ebefb6d4