如何正确使用 ECMAScript 2021 的动态 import-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，JavaScript 的规范也不断更新。ECMAScript 2021 中引入了动态 import，它可以帮助我们实现按需加载，提高页面加载速度。但是在使用动态 import 的过程中，我们也需要注意一些细节。

动态 import 的基本语法

动态 import 的基本语法如下：

import('module')
  .then((module) => {
    // module.exports will contain the module’s exports object
  })
  .catch((err) => {
    // handle error
  });

上面的代码中，我们使用 import 函数加载一个 JavaScript 模块。当加载完成后，then 方法中的回调函数将会被执行。我们可以通过 module.exports 来获取模块中导出的内容。如果加载失败，catch 方法中的回调函数将会被执行。

在模块加载的过程中，浏览器会自动下载相关的资源，这样可以提高页面的加载速度。但是，如果你使用的是 HTTP/1 协议，每次加载模块都需要建立一个新的连接，这样会导致性能问题。HTTP/2 可以有效地解决这个问题，它可以同时发起多个请求，从而提高资源的加载速度。

动态 import 的注意事项

1. 动态 import 必须在顶层作用域调用

动态 import 必须在顶层作用域调用，这意味着你不能在循环语句或者条件语句中调用。例如，下面的代码是错误的：

if (condition) {
  import('module')
    .then((module) => {})
    .catch((err) => {});
}

2. 动态 import 不会兼容 CommonJS 模块

动态 import 不会兼容 CommonJS 规范中的 require 方法。所以，当你调用一个 CommonJS 模块时，你需要将其转换为 ES Module。

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

const myModule = require('my-module');

上面的代码中，我们使用 createRequire 方法从一个 URL 创建一个 require 函数，并将 my-module 转换为 ES Module。

3. 动态 import 可以使用字符串模板

动态 import 可以使用字符串模板。这意味着，你可以将模块的名称设定为一个变量。例如：

const moduleName = 'my-module';

import(`./modules/${moduleName}.js`)
  .then((module) => {})
  .catch((err) => {});

4. 动态 import 不支持导入 HTML 文件

动态 import 不支持导入 HTML 文件。如果你需要在 HTML 中导入 JavaScript，你应该使用标准的 script 标签。例如：

<script type="module" src="./app.js"></script>

动态 import 的示例代码

下面是一个使用动态 import 的示例代码，它可以帮助你更好地了解动态 import 的用法。

const container = document.querySelector('#container');

container.addEventListener('click', async () => {
  const { default: module } = await import('./module.js');
  module();
});

上面的代码中，当用户单击 #container 元素时，我们异步加载一个名为 module.js 的 JavaScript 模块。当加载完成后，我们调用该模块中导出的 default 函数。这就是动态 import 的基本用法。

总结

动态 import 是 ECMAScript 2021 中的一个新特性，它可以帮助我们实现按需加载，提高页面加载速度。在使用动态 import 的时候，我们需要注意一些细节。例如，动态 import 必须在顶层作用域调用，不会兼容 CommonJS 模块，不支持导入 HTML 文件等。

如果你希望提高页面的加载速度，动态 import 是一个很好的选择。它可以帮助我们实现按需加载，提高性能。希望本文对你有帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6492921c48841e9894059b7a