理解 ECMAScript 2019 中的动态导入-JavaScript中文网-JavaScript教程资源分享门户

随着现代 JavaScript 应用程序的发展，模块化已成为开发人员必须掌握的基本技能之一。ECMAScript 2015（ES6）引入了 import/export 机制使得模块化编程更加方便。而在 ECMAScript 2019 中，新增加了一个重要特性: 动态导入。

什么是动态导入？

通常情况下，我们使用静态导入来引入其他模块：

import { example } from './example.js';

这种静态导入需要在编译时确定。相比之下，动态导入可以在运行时决定要导入哪个模块，如下所示：

import('./example.js').then((module) => {
  const example = module.example;
  // do something with example
});

注意到上述代码使用了 import() 函数，它返回一个 Promise。当 Promise 解析后，就可以从模块中取出 exports 对象里面的内容，就跟使用静态导入一样。

使用动态导入有很多好处：首先，它构建起了一种异步加载模块的标准方法，在 Web 上被广泛支持；其次，使用动态导入可以节省应用程序部署时的带宽和内存空间，并且让公共库和某些不太常用的功能能够以按需方式加载。

不过，需要注意的是，使用动态导入也有缺点。因为它要在运行时解析模块，所以可能会出现某些执行期间错误。同时，在浏览器中使用动态导入也存在一定的兼容性问题。

在 JavaScript 应用程序中使用动态导入

要使用动态导入，我们首先需要确保项目中的编译器支持 ECMAScript 2019 标准。具体来说，webpack 配置中应该这样写：

module.exports = {
  // ...
  optimization: {
    runtimeChunk: 'single',
  },
};

此外，你还需要从代码中使用 import() 函数来加载任何动态代码。

下面来看一个示例，假设我们正在开发一个翻译组件，它需要在运行时动态加载语言包。让我们来看一下如何实现：

// javascriptcn.com 代码示例
// i18n.js
const translations = {
  en: {
    hello: 'Hello, world!',
  },
  zh: {
    hello: '你好，世界!',
  },
};

export function getTranslation(locale) {
  return translations[locale];
}

// main.js
async function translate(locale) {
  const { getTranslation } = await import('./i18n.js');
  const translation = getTranslation(locale);
  console.log(translation.hello);
}

translate('en'); // Output: 'Hello, world!'
translate('zh'); // Output: '你好，世界！'

在上述示例中，我们通过在 main.js 中使用 import() 函数来异步加载语言包。当它被解析并加载时，我们再用获取到的 getTranslation 函数来获取翻译内容。

如此以来，在程序运行时就能按需加载模块（即使它们只在需要时才被使用），这既确保了最佳性能，也增强了程序的可拓展性。

总结

动态导入是 ECMAScript 2019 提供的一种新特性，可以让开发人员在运行时异步加载模块，并提高应用程序的性能和可拓展性。本文介绍了动态导入的基础知识、使用方法和相关注意事项。如果你还没尝试过动态导入，那就赶紧试一试吧！

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