让你的代码不再繁琐，教你使用 ES11 中的 import() 方法动态加载模块-JavaScript中文网-JavaScript教程资源分享门户

前言

在大型的前端项目中，代码量往往非常庞大，对于用户来说，不可能一次性加载所有的代码，否则会导致页面加载缓慢，影响用户体验。为此，前端开发人员需要采用一些技术手段来优化加载和执行速度。其中，动态加载模块是一种非常重要的技术手段。

ES11 中引入了新的语法，即 import() 方法，它可以在代码运行时动态地加载模块。本文将详细介绍使用 import() 方法动态加载模块的方法和意义，并提供示例代码供参考。

使用 import() 方法动态加载模块

在 ES6 中，我们可以使用静态 import 语句来导入一个模块：

import { foo } from './module.js';

但是，这种语法只能在代码的顶层使用，并且只能在编译时确定导入的模块。

而在 ES11 中，我们可以使用动态 import 语句来动态加载模块：

import('./module.js').then(module => {
  // 现在可以使用 module 中导出的内容了
});

动态 import 语句是一个函数，它返回一个 Promise，当模块加载完成后会被 resolve。这意味着我们可以在代码运行时决定需要加载哪些模块，并且可以在需要的时候进行加载。

意义

使用 import() 方法动态加载模块，可以帮助优化代码的加载和执行速度，从而提高用户体验。具体来说，它有如下几个优点：

1. 精细控制代码的加载

在某些场景下，我们可能只想在用户需要的时候才加载某些代码，而不是一次性加载所有代码。例如，一个页面中有多个功能模块，每个模块的运行代码并不相同。如果都在页面加载时就加载所有的代码，那么可能会产生一定的性能消耗和卡顿现象。如果使用 import() 方法动态加载模块，就可以在需要的时候再加载相应的代码，从而充分发挥性能优势。

2. 改善代码的可维护性

当代码量增多的时候，不同模块之间可能会有冲突的问题。使用 import() 方法动态加载模块可以避免这种冲突。因为每个模块都是独立的，只有在需要的时候才被加载，而加载时也不会影响其他模块的运行。

3. 提高代码的可读性

使用 import() 方法动态加载模块可以将代码分割成多个小块，从而使代码更加清晰易懂。尤其是在大型项目中，这种分块的方式可以帮助我们更好地理解代码和逻辑。

示例代码

下面是一个使用 import() 方法动态加载模块的示例代码。首先，我们将需要加载的模块放在一个数组中，然后通过遍历数组，动态加载每个模块：

const modules = ['./module1.js', './module2.js', './module3.js'];

Promise.all(modules.map((m) => import(m)))
  .then((modules) => {
    // 模块加载完成之后执行相应逻辑
  })
  .catch((e) => console.error(e));

在这个示例代码中，我们用到了 Promise.all 方法，该方法可以在所有模块都加载完成之后执行相应逻辑，并且能够捕获加载模块时的错误。

总结

ES11 中的 import() 方法可以帮助我们更加灵活地加载模块，从而充分发挥前端性能的优势。使用 import() 方法动态加载模块有着精细控制代码的加载、改善代码的可维护性和提高代码的可读性等多个优点。因此，我们可以在实际项目中运用动态加载模块技术，从而优化前端性能，提高用户体验。

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