动态导入import()须在事件回调等函数作用域内调用，不可置于模块顶层；推荐用async/await处理加载，支持条件加载、缓存复用及按导出方式解构模块对象。

动态导入（import()）在点击事件中触发加载，核心是把 import() 写成一个返回 Promise 的函数，然后在事件回调里调用它，并用 await 或 .then() 处理模块。

确保 import() 在事件处理函数内调用

import() 是一个动态函数调用，不能出现在模块顶层（否则会报语法错误），必须放在函数作用域中，比如点击事件的回调里：

• ✅ 正确：在 addEventListener 或 onclick 回调里执行 import('./module.js')
• ❌ 错误：在模块最外层写 import('./module.js')，会直接报错 Unexpected token 'import'

用 async/await 简洁处理加载和使用

给事件监听器绑定一个 async 函数，就能自然使用 await 等待模块加载完成，再调用其中导出的方法或组件：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

button.addEventListener('click', async () => {
  try {
    const { renderChart } = await import('./charts.js');
    renderChart(); // 模块加载后立即使用
  } catch (err) {
    console.error('模块加载失败:', err);
  }
});

配合条件加载或按需初始化

动态导入常用于按需加载功能模块，比如只在用户点击“导出”时才加载 Excel 库，避免首屏加载过大：

• 可结合 if 判断是否已加载过，避免重复请求（但注意：多次 import() 同一路径，浏览器会自动复用已缓存的模块）
• 加载后可缓存模块对象，减少重复解析开销（非必需，但适合高频调用场景）
• 示例：点击按钮首次加载富文本编辑器，后续点击直接复用

注意模块导出方式与解构匹配

动态导入返回的是一个模块命名空间对象（类似 { default: ..., foo: ..., bar: ... }），解构时要和目标模块的导出方式一致：

• 如果模块用 export default function init() {...}，就用 const { default: init } = await import('./init.js')
• 如果模块用 export function show() {...}，就用 const { show } = await import('./ui.js')
• 也可以直接用 const mod = await import('./xxx.js')，再通过 mod.default 或 mod.show 访问

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南