ES2021 中的 Dynamic import，动态导入实战-JavaScript中文网-JavaScript教程资源分享门户

ES2021 中的 Dynamic import 功能让 JavaScript 应用程序能够动态地从外部模块中导入模块。与常规的 import 语句不同的是，Dynamic import 允许在程序运行时异步加载模块，这是一种强大的编程技术。

Dynamic import API

使用 Dynamic import, 可以通过以下语法从一个模块中导入属性，方法，以及导出对象。

import('module-name')
  .then(module => {
    // loaded module object
  })
  .catch(error => {
    // error handling
  });

从语法中可以看到，Dynamic import 返回一个异步操作的 Promise 对象。在 promise 成功(resolve)后，模块对象将被传递给在 'then' 回调函数中。

在模块加载期间出现错误时，Promise 将以拒绝(reject)状态结束。此情况下，可以在 catch() 方法中处理错误。

动态导入实战

使用 Dynamic import 来加载组件

假设我们正在开发一个 Web 应用程序，其中未来用户将能够通过滚动和点击标签页的方式来查看俄罗斯抽象主义艺术家 Kandinsky 的作品。每个标签页都代表不同的艺术风格，而这些风格需要通过网络上的 API 加载。

为了实现这一目标，我们可以将各种艺术风格的面板定义为组件，并为它们编写相应的代码文件。然后使用 Dynamic import 动态导入每个面板。例如：

async function loadApp() {
  const Panel1 = await import('./Panel1.js');
  const Panel2 = await import('./Panel2.js');
  const Panel3 = await import('./Panel3.js');
  // ...
}

注意，我们使用了 async 函数来同步处理异步加载，以避免回调地狱。在所有选项卡面板被加载完成之后，我们可以通过一些事件，并调用一个回调函数来启动应用程序。

按需加载

在大型应用程序中，加载过多的 JavaScript 代码将导致应用程序变慢。使用 Dynamic import 可以更好地控制加载过程，实现按需加载。

例如，你可以为单个视图或菜单项或功能的组件保留一个打包文件而不是加载整个单页应用程序。当用户切换到该视图时，我们只需要动态地导入该组件即可。例如：

function loadComponent(name) {
  return import(`./components/${name}.js`);
}

// 等待用户打开某个视图时再动态加载
if (openModel === 'actions') {
  let component = await loadComponent('largeActionList');
}

总结

本文介绍了 ES2021 中的 Dynamic import 功能，这是一项有用的技术，可以帮助我们做出更高效的 JavaScript 应用程序。我们可以通过 Dynamic import 提高对代码库的控制权，并且可以按需加载代码，这大大提高了应用程序的性能和速度。

在实际开发中，Dynamic import 同样也是更好的编程实践。它可以使我们的代码更加清晰而且易于理解，同时也可以让我们项目分离成多个独立的模块进行开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534ef6b7d4982a6eba8eab8