在前端开发中，我们经常需要按需加载代码，以提高页面的加载速度和性能。在以往，我们通常使用 Webpack （或其他模块打包器）来实现动态加载代码。但是，ES11 中引入的新特性 import()（动态导入）可以让我们在不依赖打包工具的情况下实现 Webpack-like 的按需加载。
import() 的基本用法
import() 方法是一个异步方法，用于加载模块并返回一个 Promise 对象，该 Promise 对象会 resolve 为导入的模块。它可以有零或多个参数，第一个参数是要导入的模块的路径（可以是字符串常量或动态生成的字符串），后续参数可以是 Object 类型的配置对象，用于设置导入的一些选项。
下面是一个基本的 import() 使用示例：
import('./module.js')
.then(module => {
// Do something with the loaded module
})
.catch(err => {
// Handle errors while loading module
});动态加载代码的实践意义
在实际开发中，动态加载代码的作用非常大。有如下几个方面的意义：
提高页面加载速度和性能。动态加载代码可以把页面初始化时不需要的代码延迟加载，只有在需要时才加载，缩短页面加载时间，提高性能。
优化代码体积。动态加载代码可以让页面只加载使用到的代码，减少未使用代码的加载，从而优化代码体积。
更好的代码组织结构。动态加载代码可以把一个大的代码块拆分成多个小块加载，便于管理和维护代码。
实现动态导入的案例
以一个简单的账户中心页面为例，其中包括一个登录表单和一个用户信息模块。在登录成功后，需要加载用户信息模块并显示用户信息。这个需求可以通过动态导入来实现。
- 首先，我们需要在页面初始化时把用户信息模块的代码拆分出来，并动态导入：
-- -------------------- ---- -------
--- -------------------- - ------
----- -------- -------------------- -
-- ----------------------- -
----- ------ - ----- ---------------------------------
-------------------- - -----
------ -------
-
-
-- -----------------
----- -------- -------------------- -
-- ------
----- -------------- - ----- ---------------------
----- -------- - ----- -----------------------------
-- ------
-在上面的代码中，首先声明了一个 userInfoModuleLoaded 变量，用于判断用户信息模块是否已经加载。然后定义了一个异步函数 loadUserInfoModule，该函数用于动态导入用户信息模块。
在 loadUserInfoModule 函数中，首先判断 userInfoModuleLoaded 变量，如果该变量为 false，则异步导入用户信息模块，并把 userInfoModuleLoaded 变量设置为 true。最后返回导入的模块。
在登录成功后的逻辑中，首先调用 loadUserInfoModule 函数加载用户信息模块，然后调用导入的模块的 getUserInfo 方法获取用户信息，并显示用户信息。这样就完成了用户信息模块的动态导入。
- 接下来，我们把用户信息模块的代码拆分出来：
// user-info.js
export function getUserInfo() {
// 省略获取用户信息的逻辑
}在上面的代码中，我们把 getUserInfo 函数从原来的模块中拆出来，作为一个单独的模块导出。
通过以上代码，我们实现了按需加载代码，并在页面加载时只加载必要的代码，提高了页面加载速度和性能。
依赖预加载
在动态导入模块时，我们可以使用 import() 方法的配置项 importingPreload，来控制是否要预加载依赖的模块。这个选项用于在加载完主模块后，事先加载当前模块依赖的模块，以提高加载速度。
import('./module.js', { importPreload: true });结论
ES11 中的 import() 方法让我们可以在前端代码中实现按需加载和代码分割的功能，不再受限于打包工具和服务器端的支持。在实际开发中，我们可以通过动态导入模块，提高页面加载速度和性能，优化代码体积，并更好地组织代码结构。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6724506b2e7021665e130394