在前端开发中，模块化是一个非常重要的概念，保持代码的整洁和可维护性。在 ES6 的时候，引入了Module的功能，而对于动态加载模块，ES11 中的 import() 方法则提供了良好的解决方案。
import() 方法介绍
在ES11之前，我们通常使用 CommonJS 的require()方法，来实现在运行时动态加载模块。而在ES11中，我们可以使用import()方法动态导入异步加载的模块。
与import语句不同的是，import()方法返回一个 Promise 对象，我们可以使用then()方法获取导入的模块，也可以使用await等待 Promise 对象返回结果。
import() 使用示例
下面我们将根据一个具体的场景，来演示如何动态加载模块。
假设我们正在开发一个网站，需要根据用户选择的语言加载不同的语言包。这时，我们可以编写多个不同语言的语言包，每个语言包是一个独立的模块。因为用户选择语言的操作是在运行时进行的，所以我们需要使用import()方法来动态导入语言包。
假设我们有一个名为i18n.js的文件，用于根据用户选择的语言加载相应的语言包。该文件中的代码如下所示：
// i18n.js
export async function loadLanguage(language) {
const i18nModule = await import(`./i18n/${language}.js`);
return i18nModule.default;
}在上述代码中，我们定义了一个名为loadLanguage的函数，该函数接受一个参数language，用于指定要加载的语言包。我们使用import()方法动态导入路径为./i18n/${language}.js的模块，并通过await等待模块导入成功。然后，我们返回导入的模块中的default属性，以获取该模块的默认导出。
接下来，我们将在网站中使用loadLanguage函数，根据用户选择的语言来动态加载相应的语言包。我们可以编写一个名为app.js的文件，并利用loadLanguage函数来实现用户语言选择的功能。该文件中的代码如下：
-- -------------------- ---- ------- -- ------ ------ - ------------ - ---- ------------ ----- -------- --------- - ----- -------- - ------------------ ----- ---- - ----- ----------------------- -- ------------ - -------- ----------------- - -- --------- - ----------
在上述代码中，我们首先调用getUserLanguage函数，获取用户设置的语言。然后，我们调用loadLanguage函数，根据用户选择的语言异步加载相应的语言包。最后，我们使用加载成功的语言包进行页面的渲染。
指导意义
使用import()方法动态导入模块，提高了应用程序的性能和可维护性。因为在使用import()方法动态加载模块时，只会加载用到的模块，而不是全部预加载。这有助于优化应用程序的性能，减少应用程序的加载时间。
同时，使用import()方法可以借鉴 React 的懒加载技术，使得代码能够更好的分离和封装，提高代码的可维护性。
总结
ES11中的import()方法提供了一种优雅的解决方案，用于在运行时动态加载模块。使用该方法，可以使得应用程序的性能更高，代码的可维护性更好。在开发中，可以结合具体场景，灵活运用这个方法，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f3f50968c7c53b0da499f