在 Web 开发中，页面启动速度一直是一个非常重要的指标。为了提高页面的加载速度，前端开发人员经常使用懒加载技术。在 ES11 中，新增了 Dynamic Import 功能，可以帮助我们更方便地实现懒加载，提高页面的启动速度。
Dynamic Import 是什么？
Dynamic Import 是 ES11 中新增的一个功能，它可以让我们在运行时动态地加载模块。在之前的 ES6 中，我们只能使用静态 import 语句来加载模块，而且需要在编译时就确定加载的模块。但是，有些情况下我们需要在运行时才能确定需要加载哪些模块，这时就可以使用 Dynamic Import。
Dynamic Import 的语法
Dynamic Import 的语法非常简单，只需要使用 import() 函数即可。它的使用方式和普通的 import 语句类似，只是需要将要加载的模块放在一个字符串中作为参数传递给 import() 函数。
import('./module.js').then(module => {
// 在这里可以使用加载的模块
});利用 Dynamic Import 实现懒加载
利用 Dynamic Import 实现懒加载非常简单，只需要在需要延迟加载的模块中使用 import() 函数即可。比如，在一个页面中有一个很大的模块，我们可以将它延迟加载，只有当用户需要使用时才加载。
// 在页面加载时不会加载 bigModule.js
const button = document.querySelector('#button');
button.addEventListener('click', () => {
import('./bigModule.js').then(module => {
// 在用户点击按钮后才会加载 bigModule.js
module.doSomething();
});
});Dynamic Import 的优势
相比于传统的静态 import 语句，Dynamic Import 有以下优势：
1. 延迟加载
Dynamic Import 可以让我们在需要时才加载模块，避免一次性加载过多的模块，从而提高页面的启动速度。
2. 更好的代码分割
使用 Dynamic Import 可以将页面分成多个小模块，从而更好地管理代码，减少代码的维护难度。
3. 更灵活的模块加载
Dynamic Import 可以让我们在运行时动态地加载模块，从而更灵活地管理模块加载的顺序和方式。
总结
Dynamic Import 是 ES11 中新增的一个非常实用的功能，它可以帮助我们更方便地实现懒加载，提高页面的启动速度。使用 Dynamic Import 可以让我们更好地管理代码，减少代码的维护难度。在实际开发中，我们可以根据需要灵活地使用 Dynamic Import，从而提高页面的性能和用户体验。
示例代码
-- -------------------- ---- -------
-- ------------
------ -------- ------------- -
---------------------------
-
-- --------
----- ------ - ----------------------------------
-------------------------------- -- -- -
------------------------------------ -- -
---------------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513f16e95b1f8cacdc69d31