随着前端应用的复杂度不断增加，对代码的打包和优化也越来越重视，而模块异步加载则成为了优化性能的一个途径。在 ECMAScript 2018 中，通过两个新特性 import() 和动态 import，我们可以更加灵活地加载模块，从而提高应用的性能和可维护性。
import()
在 ES6 中，我们已经可以使用 import 语句来加载模块，其用法如下：
// 导入默认模块
import Calc from './calc.js';
// 导入具名模块
import { add, mul } from './calc.js';如果我们要加载某些模块，但是在代码运行时才能确定需要加载哪些模块，以往我们只能使用 CommonJS 的 require 函数来实现动态加载，其用法如下：
const Calc = require('./calc.js');这样的话，在代码中就无法利用模块系统的优势，增加模块的负载时间，以及使得应用的性能得不到提升。而在 ECMAScript 2018 中，我们可以使用 import() 特性来实现动态加载，其用法如下：
-- -------------------- ---- ------- -- -------- ------------------- ---------- -- - -- ---- -- ------------ -- - ------------------------------- --- -- -------- ------------------- ------------ -- - ----- - ---- --- - - ------- -- ---- -- ------------ -- - ------------------------------- ---
可以看到，在引入模块时，我们需要使用的是一个函数，而不是直接使用 import。这个函数会返回一个 Promise，当模块加载完成后，我们可以通过 then 方法获取导出对象，如果加载失败，我们可以通过 catch 方法捕获错误。
import() 的特点是：
- 可以作为表达式使用，可以在代码运行时根据需要加载指定的模块。
- 可以与
async和await结合使用，更加方便地进行异步操作。 - 可以与
for await...of等遍历方法结合使用，非常适合处理大型数据。
动态 import
在 import() 中，虽然我们能够根据需要动态加载指定的模块，但是在大多数情况下，我们往往只需要加载一个模块，这时候引入 import() 就显得过于繁琐。在 ES2020 中，我们可以使用动态 import，其用法如下：
// 导入默认模块
const Calc = await import('./calc.js');
// 导入具名模块
const { add, mul } = await import('./calc.js');可以看到，使用动态 import 就像是使用 import 语句一样，但其可以在代码运行时进行。需要注意的是，动态 import 必须使用 await 关键字，否则会抛出错误。
除了使用 await 关键字，动态 import 也可以使用 Promise 来加载模块：
-- -------------------- ---- ------- -- ------ ------------------- ---------- -- - -- ---- --- -- ------ ------------------- ------------ -- - ----- - ---- --- - - ------- -- ---- ---
与 import() 相比，动态 import 的特点是：
- 更加方便快捷，与
import语句一样，不需要额外的 try-catch 处理。 - 必须使用
await或者 Promise，不能使用then和catch块，否则会抛出错误。 - 不能直接作为表达式使用，需要使用括号包裹。
综合应用
介绍了 import() 和动态 import 之后，让我们来看一个实际的例子：
async function loadComponent() {
const component = await import('./component.js');
const { default: Component } = component;
const instance = new Component();
instance.render();
}
loadComponent();在上面的例子中，我们通过 async 和 await 同时使用了 import() 和动态 import。首先我们使用 import() 加载了一个组件，然后通过解构获取了默认导出对象，最后通过实例化并调用 render 方法来渲染组件。
总结：在 ECMAScript 2018 中，我们可以使用 import() 和动态 import 来更加灵活适应性强地加载模块，从而优化应用的性能和可维护性。在实际应用中需要根据业务场景对两者进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e708a9f6b2d6eab326036a