JavaScript 的模块化已经成为了前端开发中的核心内容之一。ES6 将其正式纳入标准，通过引入 import 和 export 语法实现了模块化加载功能。在 ES11 中，对于 JavaScript 模块的加载进行了更深入的探究和优化。
动态导入
传统的 JavaScript 模块加载方式是静态加载，在编译时就确定好依赖关系。但是有时候会存在动态加载模块的需求，例如用户点击某个按钮后再加载某个模块。ES11 提供了新的动态导入语法 import()，可以在运行时动态加载模块。
async function loadModule(path) {
const module = await import(path);
return module;
}
loadModule("./module.js").then(module => {
// do something with the module
});与静态导入不同，动态导入返回的是一个 Promise 对象，在 resolve 后会得到模块的 namespace 对象。通过该对象可以访问模块暴露出来的属性和方法。
import.meta
在模块加载过程中，很多时候我们需要获取模块的相关信息，例如模块文件所在路径等。ES11 引入了 import.meta 对象提供这样的信息。
console.log(import.meta.url); // 当前模块的 URL
import.meta 对象是一个对象字面量，其中的属性与属性值都是不可修改的。
模块命名空间
在过去，我们通常使用对象来实现模块化代码的命名空间。ES11 中新增了一种原生支持命名空间的方式，可以通过 export * as namespace 将多个模块合成一个大的命名空间。
-- -------------------- ---- ------- -- ---------- ------ -------- ----- -- -- ---------- ------ -------- ----- -- -- ------------ ------ - -- ----------- ---- --------------- ------ - -- ---------------- ---- --------------- -- -------- ------ - ------------ ---------------- - ---- ----------------- ------------------ -----------------------
总结
ES11 引入了动态导入和 import.meta 对象，使得模块加载机制更加灵活，并且有效地为模块化开发提供了更丰富的信息。同时，通过 export * as namespace，我们可以用更优雅的方式管理不同模块之间的命名空间，增强代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ba3a395b1f8cacd347252