动态 import() 支持变量路径拼接但需静态可分析，如 ./locales/${lang}.js（lang 限已知值）；可用 if/switch 控制加载、按环境/权限/用户行为触发；须用 try/catch 错误处理并提供降级方案。
可以根据条件动态选择加载模块，核心是把 import() 当作一个普通函数来调用，路径支持变量拼接，且整个调用可放在 if、switch、事件回调等任意运行时逻辑中。
路径拼接需满足静态可分析性
import() 允许使用变量构造路径，但不是所有动态写法都有效。构建工具（如 Vite、Webpack）需要能静态识别可能的模块范围，否则无法拆包。
- ✅ 支持：字符串模板中变量值有限、路径结构固定，例如
import(`./locales/${lang}.js`)，其中lang只可能是'zh'、'en'、'ja'等几个已知值 - ❌ 不支持：完全不可预测的路径，例如
import(`./modules/${userInput}.js`)或import(randomPath)，会导致构建失败或运行时报错 - ? 提示：Vite 和 Webpack 会自动扫描模板字符串中所有可能的文件路径并提前打包，所以要确保变量取值是确定且有限的
用 if / switch 控制模块选择
在函数内部根据业务逻辑判断加载哪个模块，是最直接的方式。
- 用
if分支：if (theme === 'dark') {<br> const themeModule = await import('./themes/dark.js');<br> applyTheme(themeModule.default);<br>} else {<br> const themeModule = await import('./themes/light.js');<br> applyTheme(themeModule.default);<br>} - 用
switch处理多状态：switch (feature) {<br> case 'chart':<br> const chart = await import('./features/chart-lib.js');<br> renderChart(chart.Chart);<br> break;<br> case 'editor':<br> const editor = await import('./features/monaco-editor.js');<br> initEditor(editor.default);<br> break;<br>}
结合用户行为或环境特征触发
模块加载时机由真实条件驱动，比如设备类型、权限、用户操作或网络状态。
- 按设备加载不同实现：
if (/Mobile|iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {<br> await import('./components/mobile-nav.js');<br>} else {<br> await import('./components/desktop-nav.js');<br>} - 按权限加载管理功能：
if (user.role === 'admin') {<br> const adminTools = await import('./admin/dashboard.js');<br> renderAdminPanel(adminTools);<br>} - 点击后才加载重型模块：
button.addEventListener('click', async () => {<br> const heavyModule = await import('./heavy-report-generator.js');<br> heavyModule.generate();<br>});
错误处理与降级方案
动态导入可能失败（如路径不存在、网络中断），必须主动捕获并提供备用逻辑。
- 用
try/catch捕获异常：try {<br> const module = await import(`./features/${feature}.js`);<br> module.init();<br>} catch (err) {<br> console.warn(`加载 ${feature} 失败，使用基础版本`, err);<br> fallbackToBasicFeature();<br>} - 预设默认模块兜底：
let module;<br>try {<br> module = await import(`./plugins/${pluginName}.js`);<br>} catch {<br> module = await import('./plugins/fallback.js'); // 固定路径，确保存在<br>}<br>module.run();
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
