ES11 支持动态 import 导入模块 - 组件懒加载就会用到
随着 Web 应用的不断发展，前端开发越来越复杂，组件化开发也成为了不可或缺的一部分。在组件化开发中，我们经常需要使用懒加载来优化应用性能。而 ES11 新特性中的动态 import，可以让我们更方便地实现组件懒加载。
动态 import 是什么？
动态 import 是 ES11 中新增的一个特性，可以让我们在运行时动态地加载模块。相较于静态 import，动态 import 具有更大的灵活性和可扩展性。
动态 import 的语法如下：
import(modulePath)
.then((module) => {
// do something with the module
})
.catch((error) => {
// handle error
});其中，modulePath 是一个字符串，指定要加载的模块的路径。当调用 import() 方法时，会返回一个 Promise 对象，该对象在模块加载完成后会被 resolve，resolve 的结果就是加载的模块。
动态 import 的优势
动态 import 相较于静态 import 具有以下优势：
动态加载模块，可以减少应用的启动时间和初始化时间，提升应用性能。
动态 import 可以根据运行时条件来加载不同的模块，提高了应用的可扩展性和灵活性。
动态 import 可以实现按需加载，避免了不必要的资源浪费，提高了应用的效率。
动态 import 的应用
动态 import 可以应用于很多场景，其中最常见的应用就是组件懒加载。在组件化开发中，我们经常需要按需加载组件，以减少应用的启动时间和初始化时间，提升应用性能。而动态 import 可以很方便地实现组件懒加载。
下面是一个动态 import 实现组件懒加载的示例代码：
// javascriptcn.com 代码示例
const loadComponent = async (name) => {
const component = await import(`./components/${name}.js`);
return component.default;
};
const button = document.querySelector('#button');
button.addEventListener('click', async () => {
const component = await loadComponent('MyComponent');
const myComponent = new component();
myComponent.render();
});在上面的示例代码中，我们定义了一个 loadComponent 函数，用于动态加载组件。该函数接收一个组件名称作为参数，然后使用 import() 方法动态加载对应的组件模块。加载完成后，我们可以通过 component.default 获取到组件类，然后实例化该类，调用 render 方法渲染组件。
总结
ES11 支持动态 import 导入模块，可以方便地实现组件懒加载。动态 import 相较于静态 import 具有更大的灵活性和可扩展性，可以根据运行时条件来加载不同的模块，提高了应用的可扩展性和灵活性。在组件化开发中，动态 import 可以很方便地实现按需加载组件，优化应用性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e7dcc95b1f8cacd79f2c0