在 ECMAScript 2020 中，我们终于可以使用动态 import 这个新特性了。动态 import 让我们能够在运行时异步地加载模块，而不需要在代码中预先声明它们。在这篇文章中，我们将深入探讨动态 import 的使用方法并展示如何优化它。
基础使用
在过去，我们通常会这样来加载一个模块：
------ - -------- - ---- ------------------- -- -- --------
在这种方式中，我们必须在代码的顶部预先声明要引入的模块。如果我们需要在代码中异步地加载一个模块，我们就不能再使用这种方式。幸运的是，有了动态 import，我们可以这样来加载模块：
-------------------------------------- -- - -- --------- ---
在这种方式中，我们只需要在运行时指定要加载的模块。这个模块会被异步地加载，并返回一个 Promise，这个 Promise 在加载完成后会被解析，它的值就是我们所引用的模块。我们可以使用这个 Promise 里的值来访问模块的导出。
动态 import 的优势
使用动态 import 有几个优势。首先，我们可以根据需要异步地加载模块，而不需要在代码中预先声明它们。这使得我们可以优化我们的应用程序的加载性能，只加载我们需要的模块。
其次，动态 import 可以让我们使用代码拆分技术来优化应用程序的打包大小。我们可以在需要的时候加载模块，这样只有所需的代码才会被加载到浏览器中。
动态 import 的进一步优化
虽然动态 import 已经很强大了，但是我们还可以通过几种方式来进一步优化它。
使用 import() 函数的 return 引用
在上面的例子中，我们并没有在 import() 函数上使用 return 语句。如果我们在 import() 函数调用后添加 return 语句，我们可以把导入的模块赋值给一个变量，从而让我们在多个地方重复使用这个模块。
----- ----------------- - ---------------------------
-------- ----------- -- -
------ ----------------------------- -- -
-- ---------
---
-使用动态 import 和 async/await
我们还可以使用 async/await 来更方便地使用动态 import。在上面的例子中，我们使用了 then() 方法来处理异步加载模块的结果。如果我们使用 async/await，我们可以像这样来处理异步操作：
----- -------- ----------- -- - ----- ------ - ----- --------------------------- -- --------- -
在这种方式中，我们使用 await 操作符来等待模块加载完成。这使我们的代码更加清晰。
结论
动态 import 是一个非常强大的功能，它可以帮助我们优化我们的应用程序的性能，提高代码的可读性。虽然它已经很强大了，但是我们可以使用上述优化方式来进一步提高它的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703447ad91dce0dc84abaf5