ESModule 通过 import() 动态导入实现轻量级前端模块加载，支持 CDN、懒加载与条件加载，需 type="module" 启用，路径须为静态字符串，推荐默认导出并可封装加载器增强健壮性。
ESModule 本身不提供运行时动态加载逻辑，但可通过 import() 动态导入语法 + 基础约定，实现轻量级前端模块加载，无需构建工具或打包器。
用 import() 按需加载模块
import() 是一个返回 Promise 的函数，支持字符串路径（相对/绝对/URL），浏览器原生支持，适合做懒加载或条件加载。
- 路径必须是静态可分析的字符串字面量，不能拼接变量（如
import('./mod' + name + '.js')会报错） - 支持从 CDN 加载，例如：
import('https://unpkg.com/lodash-es@4.17.21/isArray.js') - 可用于路由组件、工具函数、第三方小工具等场景，避免初始包体积膨胀
配合 export 暴露清晰接口
被加载模块应只导出必要功能，保持单一职责。推荐默认导出一个函数或对象，便于调用。
- 示例模块
utils/date.js： export default { format: (d) => d.toISOString().split('T')[0] };- 加载后直接使用：
import('./utils/date.js').then(m => m.default.format(new Date()))
用 type="module" 启用原生模块环境
HTML 中需在 <script></script> 标签声明 type="module"，否则 import() 在非模块上下文中不可用。
立即学习“Java免费学习笔记（深入）”；
<script type="module">import('./app.js');</script>- 模块脚本默认延迟执行、自动启用严格模式、作用域隔离
- 注意：模块路径解析基于当前 HTML 文件位置，不是当前 JS 文件位置
简单封装加载器提升可用性
可封装一个轻量函数，统一处理错误、缓存、超时等常见需求，不依赖框架。
- 示例：
const load = (src, timeout = 5000) => Promise.race([import(src), new Promise((_, r) => setTimeout(() => r(new Error('timeout')), timeout))]);- 调用：
load('./features/chart.js').then(m => m.init()).catch(err => console.warn('load failed:', err)); - 如需模块缓存，可用 Map 存已加载的 Promise，避免重复请求
