在前端开发中，我们经常需要使用模块化开发的方式来组织代码，并且使用导入函数来引入需要的模块。在 ES6 中，我们就已经有了 import 和 export 关键字来实现模块化开发，但是在 ES11 中，我们还引入了一个新的函数——import() 函数，来替代原有的导入函数。那么，为什么会有这个变化呢？
1. 动态导入
在 ES6 中，导入语句必须在模块的顶层作用域中使用，不能在函数中或条件语句中使用。这样做的好处是可以在编译时确定模块的依赖关系，提高了代码的可维护性和可读性。但是，有时候我们需要在运行时才能确定需要导入哪个模块，这时候就需要使用动态导入。
ES11 中的 import() 函数就可以实现动态导入，它接受一个模块的路径作为参数，返回一个 Promise 对象。当 Promise 对象 resolve 时，就表示模块已经加载完成，可以使用其中导出的内容了。
async function loadModule() {
const module = await import('./module.js');
console.log(module.default);
}
loadModule();这里我们使用了 async/await 来等待模块加载完成。需要注意的是，import() 函数只能在模块的顶层作用域中使用，不能在函数中或条件语句中使用。
2. 按需加载
在 Web 应用中，我们通常需要加载很多 JavaScript 文件，这会影响页面的加载速度和性能。如果我们能够按需加载 JavaScript 文件，就可以减少不必要的网络请求，提高页面的响应速度和用户体验。
ES11 中的 import() 函数可以实现按需加载，只有在需要使用某个模块时才会去加载它。这样可以减少不必要的网络请求，提高页面的响应速度和性能。
button.addEventListener('click', async function() {
const module = await import('./module.js');
module.doSomething();
});这里我们在按钮的点击事件中按需加载了一个模块，并调用其中的一个方法。需要注意的是，按需加载的模块会缓存起来，下次使用时会直接从缓存中读取，不会再次发送网络请求。
3. 代码分割
代码分割是指将一个大型的 JavaScript 应用程序分割成多个小的代码块，按需加载，以提高应用程序的性能和可维护性。ES11 中的 import() 函数可以实现代码分割，将一个大型的 JavaScript 应用程序分割成多个小的代码块，按需加载，以提高应用程序的性能和可维护性。
-- -------------------- ---- -------
----- -------- ------------ -
----- --------- -------- - ----- -------------
-----------------------
----------------------
---
----------------------
----------------------
-
-------------这里我们按需加载了两个模块，并调用了其中的两个方法。需要注意的是，按需加载的模块会缓存起来，下次使用时会直接从缓存中读取，不会再次发送网络请求。
总结
ES11 中的 import() 函数是一个非常有用的函数，可以实现动态导入、按需加载和代码分割，以提高应用程序的性能和可维护性。需要注意的是，import() 函数只能在模块的顶层作用域中使用，不能在函数中或条件语句中使用。同时，按需加载的模块会缓存起来，下次使用时会直接从缓存中读取，不会再次发送网络请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65be0425add4f0e0ff79a3fb