什么是 Dynamic Import
Dynamic Import 是 ES11（也称为 ES2020）中的一个新功能，允许我们在运行时按需导入模块。在早期的 ES6 中，我们只能在静态导入期间指定需要导入的模块，但是在 Dynamic Import 中，我们可以根据需要延迟导入模块，直到本质上需要它们为止。
Dynamic Import 和静态导入的语法很相似，但有一个主要的区别是前者不是在加载时执行的。相反，它们返回一个 Promise，该 Promise 在解析完所需的依赖项后，才返回一个成功或失败值。
这个特性增强了应用程序的动态性，因为现在我们可以按需加载和执行代码，而不是在一开始就加载和执行所有代码。
如何使用 Dynamic Import
Dynamic Import 的语法非常简单，我们只需使用 import() 函数即可，它接受一个表示导入模块路径的字符串。下面是一个示例：
import('./myModule.js')
.then(module => {
// 在这里操作我们导入的模块
})
.catch(err => {
// 处理错误
});代码中的 import('./myModule.js') 表示我们想要延迟导入一个名为 myModule.js 的模块。.then() 中的 module 参数代表导入的模块，我们可以在其中执行所有操作。一个非常重要的点是，我们必须返回 import() 函数的 Promise 对象，以便在导入完成时捕获错误。
一些注意点：
在浏览器中，我们需要所有的模块都支持模块系统，并使用一个 HTTP 服务器。文件协议不受支持。在 Node.js 12.0.0 及更高版本中，Dynamic Import 是原生支持的。
在「阻止跨域访问」(CORS) 和 CSP 策略不允许情况下，我们不能使用
import()函数，因为它们依赖于浏览器的动态脚本标签，这受到这些安全策略的限制。
Dynamic Import 的优势
Dynamic Import 的优势非常明显，它可以帮助我们更好地优化我们的应用程序。以下是一些例子：
加载时间更快 - 通过按需加载模块，我们可以减少应用程序最初加载的大小，从而加快应用程序的加载时间。
更少的内存使用 - 如果我们只在需要时加载模块，那么我们将避免在我们不需要的时间将其保存在内存中。
更好的缓存控制 - 如果我们使用 Dynamic Import 按需加载应用程序，那么我们可以更好地控制缓存，使我们的应用程序更加高效。
示例代码
-- -------------------- ---- ------- -- ---------- ----- -------- ------------ - ----- ------ - ----- ------------------------ ------ ------- - -- -------- ------------------------ -- - ----------------- ------------ -- - ----------------- ---
在上面的代码片段中，我们创建了一个异步函数 loadModule()，用于加载一个名为 myModule.js 的模块。然后我们调用该函数并在返回的模块上调用 default() 函数。default() 函数是模块中我们想要执行的任何代码。
结论
在 ES11 中，Dynamic Import 带来了一个非常便利的特性，可以让我们更好地按需加载模块。它为设计更好且更高效的应用程序提供了输入点，因为我们可以根据需要延迟和控制加载时间和内存使用。但是，我们需要注意一些浏览器限制和安全策略，以避免在浏览器中出现问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753a1d68bd460d3ada673d9