什么是 dynamic import？
在 ES11 中，有一个新增的特性叫做 dynamic import。它是一种异步加载模块的方法，这使得我们可以在运行时决定加载哪些模块，而不是在编译时就只能确定所有要加载的模块。
dynamic import 的优势
懒加载
使用 dynamic import 可以实现按需加载，即只有当需要使用该模块时才会去加载，可以减少首屏加载时间，提升用户体验。
多页应用
在多页应用中，如果不使用 dynamic import，页面都会加载完所有的脚本，造成不必要的网络请求和资源浪费。而使用 dynamic import 可以按需加载，提高性能。
节约资源
使用 dynamic import 可以让我们只在需要使用某个模块时才去加载它，从而避免了不必要的资源浪费。
如何使用 dynamic import
使用 dynamic import 很简单，只需要在需要加载的地方使用 import() 方法即可。
import('./module.js') .then(module => { // Do something with the module. }) .catch(error => { // Handle the error. });
import() 方法返回一个 Promise，该 Promise 在加载完成后会 resolve，返回一个对象，该对象包含了加载的模块中的所有导出。如果加载过程中出现了问题，则 Promise 会 reject，并抛出错误。
示例
下面我们来看一个示例，该示例可以根据用户的点击事件来动态加载模块。
在以下示例中，我们有两个模块 first.js 和 second.js，我们开始时只加载了 first.js，当用户点击“加载第二个模块”按钮时，才会去加载 second.js。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- -------------- ------- ------ ------- --------------------------------- -------- -------- ------------------ - --------------------- ------------ -- - ----------------- -- ------------ -- - --------------------------- --- - ---------------------------------------------------------------- ------------------ --------- ------- ------------------------ ------- -------展开代码
first.js 代码如下：
function logHello() { console.log('Hello from the first module.'); } logHello();
second.js 代码如下：
function logWorld() { console.log('World from the second module.'); } export default function() { logWorld(); }
当点击 “加载第二个模块” 按钮时，控制台会打印出 World from the second module.。
指导意义
ES11 的 dynamic import 给前端开发带来了很多便利，通过动态加载我们可以更好地优化应用程序的加载性能，不仅提升用户体验，也能节约资源。
在实际应用中，我们可以根据业务逻辑来动态加载模块，从而实现按需加载和模块化。此外，我们还可以结合 webpack 等打包工具来进一步优化打包和加载性能。
总之，ES11 的 dynamic import 在前端开发中是一个非常有用的特性，可以帮助我们提高应用程序性能和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bffb82314edc26845f356c
