ES11（也被称为 ES2020）是 ECMAScript 的最新版本之一，其中的一个新特性是 Dynamic Import（动态导入），允许在运行时按需异步地加载 ES 模块。这个特性对于前端开发者来说，将会极大地提高代码加载和执行的效率，并有助于优化用户体验。
Dynamic Import 是什么
ES6 中的 import 语句只能在模块的顶层使用，这就意味着我们必须在代码加载时将所有模块一次性导入，即使某些模块可能在后面的代码执行过程中才会被用到或被加载。这会导致页面加载时间变慢，甚至会占用系统的内存资源。
而 Dynamic Import 则提供了一个按需动态导入模块的方法，可以在代码运行时动态加载模块，从而实现更加高效的模块加载和代码执行。
import(`./modules/${myModule}.js`)
.then(module => { /* do something */ })
.catch(err => { /* handle the error */ });Dynamic Import 语法中的模块路径（./modules/${myModule}.js）可以是静态的，也可以是计算后的。这个语法返回一个 Promise，当模块加载完毕后，Promise 将会 resolve 返回一个 module 对象，我们可以通过该对象来访问所导出的内容。
Dynamic Import 的优点
Dynamic Import 的优点在于它允许我们根据需要动态地加载 JavaScript 模块，这意味着我们可以：
- 加载和执行页面所需的 JavaScript 资源，而不必在页面加载时将所有代码一次性加载。
- 提高页面加载速度，减少内存资源的占用。
- 更容易地按需加载第三方库，只在需要的时候才进行加载。
- 扩展应用程序，以支持异步组件。
- 具有更好的灵活性，不必事先知道所需的模块，可以在需要时按需加载。
Dynamic Import 的使用案例
下面是一个使用 Dynamic Import 的示例代码，它动态地加载了不同页面的组件并在页面上渲染。
-- -------------------- ---- -------
------ ---------------
----- ----- - -
----- -- -- -----------------------
------ -- -- ------------------------
-------- -- -- --------------------------
--
-------- ------------ -
----- --------- - -------------------------------------
------------------ -- -
----- - -------- --------- - - -------
----- -------- - --- ---------------------
------------------
---
-
-------- ------------------ -
----- - ------ - - ------
-- --------------- --- ---- -
-----------------------
----- ---- - ----------------------------------------
-------------
-
-
-------------------
---------------------------------- ------------------在上面的代码中，pages 对象包含了需要动态加载的页面组件，当用户点击页面导航链接时，会根据链接上的 data-page 属性动态加载相应的模块并在页面上进行渲染。
要点总结
- Dynamic Import 允许在代码运行时按需动态加载 ES 模块。
- Dynamic Import 优化了代码加载和执行的效率，提高了页面加载速度并减少了内存资源的占用。
- Dynamic Import 可以实现按需加载第三方库，支持异步组件和提供更好的灵活性。
希望本文能帮助你了解 Dynamic Import，并在实际项目中应用该特性，提高前端开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64520ee4675af4061b5bdd68