什么是动态import？
动态import是ECMAScript 2019中引入的一个新特性，它允许我们在运行时动态加载模块，而不是在编译时静态导入模块。这使得我们能够更加灵活、更高效地组织我们的代码和资源，并且在需要时进行按需加载，从而提高我们的应用程序的性能和响应速度。
动态import的语法
动态import的语法非常简单：
import('module.js')
.then(module => {
// module加载完成，可以使用它
})
.catch(error => {
// module加载失败，可以处理错误
});我们可以将import语句放在任何支持JavaScript的地方，例如函数或条件分支。import()函数会返回一个Promise，当加载完成时，Promise会被解决，并返回被加载的模块。
动态import的使用场景
按需加载代码
在很多情况下，我们可能只需要在特定条件下加载代码，而不是在应用程序的启动时就加载所有的代码。例如，在用户与某个功能进行交互之前，我们可能不需要加载该功能所需的所有代码。这时，动态import就可以帮助我们实现按需加载代码：
-- -------------------- ---- -------
-------- ------------- -
---------------------
------------ -- -
-- --------------
--
------------ -- -
-- ---------------
---
-按需加载资源
动态import不仅可以用来按需加载代码，还可以用来按需加载其他资源，例如图片、CSS等。例如，我们可以通过动态import来加载应用程序的可选配件：
-- -------------------- ---- -------
-------- -------------------- -
------ ----------------------------------
----------- -- -
-------------
--
------------ -- -
---------------------
---
-兼容性
目前，动态import的兼容性还不是很好，只有最新的Chrome、Firefox和Safari浏览器支持。不过，我们可以使用Polyfill来使旧版浏览器也支持动态import。
总结
动态import是ECMAScript 2019中引入的一个重要的新特性，它使我们能够更加灵活、高效地组织我们的代码和资源，并且提高我们的应用程序的性能和响应速度。虽然目前还有兼容性问题，但我们可以使用Polyfill来解决这个问题。在使用动态import时，我们应该注意按需加载代码和资源，以避免不必要的代码和资源浪费。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2329e48841e9894e7bd65