在 ES12 中，新增了一个非常实用且强大的特性：Dynamic import，也称为“import()”。这个特性能够让我们在运行时才能决定导入哪些模块，从而实现按需加载，加快应用的启动速度和减小应用的体积。
Dynamic import 是什么？
Dynamic import 是 ES6 模块规范中定义的一种方法，它可以在运行时动态地导入模块。直到我们运行代码时，才能决定加载哪些模块，从而实现按需加载。这使得我们可以在应用运行时真正需要某个模块时再去加载它，而不是一开始就加载所有模块。具体来说，Dynamic import 可以用 Promise 的形式返回导入的模块，类似于以下代码：
---------------------
------------ -- -
-- --------
--
------------ -- -
-- ------
---Dynamic import 的优点
使用 Dynamic import 可以带来以下优点：
1. 按需加载
我们可以在应用运行时动态地加载需要的模块，从而减小应用的体积，减少初次加载时间，提高应用的性能。
2. 动态代码分割
Dynamic import 使得代码分割成为可能，我们可以根据组件、路由等等进行代码分割，从而减小应用的体积。
3. 更好的代码可读性
我们可以在代码的不同位置，动态地引入所需的模块，从而使得代码更加清晰易懂。
Dynamic import 的使用场景
Dynamic import 的使用场景非常广泛，下面是一些典型的使用场景：
1. 懒加载组件
使用 Dynamic import 可以在需要加载组件时才去加载，从而提高应用的性能。比如，在 Vue CLI 3 中已经默认支持了组件的懒加载，使用起来非常方便。
------ --- ---- ------
------ ------ ---- -------------
----------------
----- ------ - --- --------
------- -
-
----- --------
----- -------
---------- -- -- --------------------------
-
-
---2. 按需加载第三方库
在引入第三方库时，如果这个库比较大，可能会增加初始加载时间，从而影响用户体验。因此，我们可以使用 Dynamic import 来按需加载第三方库，只有当需要使用它时才会加载，从而加快应用的启动速度。比如：
-------- -------------------- -
------ --------- -
---- ---------
------ -----------------
---- ---------
------ -----------------
--------
------ ------------------ -------------- -------- --------------
-
-
---------------------------- -- -
-- -- ------ -
---
---------------------------- -- -
-- -- ------ -
---3. 按需加载路由
在使用 Vue Router 进行路由管理时，我们可以使用 Dynamic import 来实现路由的按需加载，从而减小应用的体积，更好地实现代码分割。
----- ------ - --- -----------
------- -
-
----- ----
---------- -- -- --------------------------
--
-
----- ---------
---------- -- -- ---------------------------
--
-
----- -----------
---------- -- -- -----------------------------
-
-
---总结
Dynamic import 是 ES6 模块规范中的一种方法，可以在运行时动态导入模块。它的使用能够实现按需加载，加快应用的启动速度和减小应用的体积。我们可以使用 Dynamic import 来懒加载组件、按需加载第三方库和实现路由的按需加载等等。在使用 Dynamic import 时，需要注意兼容性问题，并且合理使用动态代码分割，从而保证应用的性能和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c7ab57d4982a6eb5f7820