随着前端项目的不断壮大，模块化管理的方式也日渐多样化。而 ES6 引入的模块化语法已经成为了新时代的标配。但是，为了更好地适应多种情况下的不同需求，ES12 在 ES6 的基础上加入了 import() 动态导入特性。
什么是 import() 动态导入特性
import() 是 ES12 新引入的 import 语法，它可以在运行时动态地导入一个模块，而非在编译时就确定要导入哪个模块。这样可以大大提高代码的灵活性，让你能够实现更多更复杂的功能。
不同于静态导入，动态导入可以让我们根据需要动态地加载某些文件，从而运用更灵活的代码结构达到更好的性能和用户体验。
动态导入的解决问题
- 懒加载
动态导入使我们能够实现懒加载，当某个组件无需在页面初次加载时就展示时，我们可以使用动态导入来实现。
- 条件加载
动态导入可以根据某些条件来决定是否加载某个模块，这样可以减小代码包的大小，提高性能。
如何使用 import() 动态导入特性
使用 import() 的方式非常简单，只需要按以下方式导入相应的模块即可：
import('./myModule.js')
.then((module) => {
// Do something with the module.
})
.catch((error) => {
// Handle the error.
});在上述示例中，我们使用了 import() 语法动态地导入了一个名为 myModule.js 的模块。如果导入成功，我们可以在 .then() 回调函数中对模块进行操作；如果导入失败，我们可以在 .catch() 回调函数中对错误进行处理。
需要注意的是，动态导入的路径必须为一个字符串，并且必须是相对路径或绝对路径，而不能是一个变量或运算表达式。
示例代码
下面是一个通过 import() 实现懒加载的示例：
-- -------------------- ---- -------
----- ----------- -
------------- -
-- ---- --- ------- ------ ------------
----------------------
--------------------- -- -
-- -- --------- ---- --- ------- -------
------------ - --- ------------------------
--
-------------- -- -
-- ------ --- ------
-------------------
---
-
-- - ------ ---- ---- --- ------- -------
------------ -
---------------------------
-
-在上面的示例中，我们在 MyComponent 类的构造函数中使用 import() 动态导入了一个名为 utility.js 的模块。当 MyComponent 类被实例化时，utility.js 还未被加载。只有当 utility.js 被全部加载完成后，我们才会在 .then() 回调函数中对其进行操作。
总结
通过对 import() 动态导入特性的深入学习，我们可以更好地理解和应用该特性，实现更加灵活和高效的代码结构。总的来说，在实现懒加载、条件加载和代码拆分等方面，import() 动态导入都能够提供很好的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64670292968c7c53b076cbf9