动态导入（import()）是esmodule按需加载的核心机制，返回promise，支持运行时条件加载、任意位置调用、默认/命名导出解构、路由/交互触发、路径模板化（有限动态）、错误捕获及构建工具自动分包。
ESModule 的动态导入（import()）是实现按需加载的核心机制，它返回一个 Promise，允许你在运行时条件性地加载模块，而不是在编译时静态引入。
动态导入的基本用法
import() 是一个函数调用，接收模块路径字符串，返回 Promise，解析后得到模块的命名导出或默认导出对象。它可以在任意代码位置使用（如 if、函数内、事件回调中），不受 import 语句必须在顶层的限制。
- 加载默认导出：
const module = await import('./utils.js');→module.default - 加载命名导出：
const { helper } = await import('./utils.js'); - 配合
then使用：import('./modal.js').then(({ Modal }) => Modal.show());
结合路由或用户交互做按需加载
常见场景如单页应用中，点击菜单才加载对应页面组件；或表单提交前校验才加载验证库。
- React 中懒加载组件：
const Dashboard = React.lazy(() => import('./Dashboard'));' - Vue 路由异步组件：
{ path: '/admin', component: () => import('./Admin.vue') } - 原生 JS 示例：
button.addEventListener('click', () => import('./chart.js').then(({ renderChart }) => renderChart()));
路径支持变量与表达式
import() 的参数可以是拼接的字符串或模板字面量，但不能是完全动态的变量（如 import(someVar)），否则 Webpack/Vite 等构建工具无法静态分析，会降级为全量打包或报错。
- ✅ 支持：
import(`./locales/${lang}.js`)（构建工具能识别目录结构） - ✅ 支持：
import('./features/' + featureName + '.js')（需 featureName 为有限枚举） - ❌ 不支持：
import(userInput)（无法预知加载目标，通常被禁止）
错误处理与加载状态管理
动态导入可能失败（路径错误、网络问题、模块语法错误），应主动捕获异常；同时可配合 loading 状态提升体验。
- 用
try/catch捕获错误：try { const mod = await import('./heavy.js'); } catch (err) { console.error('加载失败', err); } - 显示加载提示：
loading = true; import('./data.js').finally(() => loading = false); - Vite/Webpack 会自动将
import()拆分为独立 chunk，文件名含 hash，支持长期缓存
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
