动态导入可在if、switch、三元表达式中使用,但须在函数作用域内;路径需受白名单控制,且必须用try/catch或.catch()处理加载失败。

可以直接在 if、switch 或三元表达式中调用 import(),但必须确保它出现在函数作用域内(不能在模块顶层直接执行,除非使用顶层 await)。动态导入本身是运行时行为,天然支持条件逻辑,关键在于写法合规、路径可控、错误可捕获。
条件判断中正确调用 import()
import() 是表达式,不是语句,所以可以放在任意代码块里,只要不脱离函数上下文。例如:
- 在
if分支中加载不同模块:if (userRole === 'admin') {<br> const adminTools = await import('./admin-tools.js');<br> adminTools.init();<br>} - 用
switch按类型加载对应处理器:switch (fileType) {<br> case 'pdf':<br> const pdfHandler = await import('./handlers/pdf.js');<br> pdfHandler.render(file);<br> break;<br>} - 三元操作符配合异步函数:
const module = await import(isDebug ? './debug-utils.js' : './prod-utils.js');
注意路径不能完全不可预测
虽然 import() 支持变量拼接,但构建工具(如 Vite、Webpack)需要在打包阶段静态分析可能的模块路径,否则会误判或全量打包。
- ✅ 安全写法:路径由有限白名单控制
const lang = userLang || 'en';<br>if (['en', 'zh', 'ja'].includes(lang)) {<br> const locale = await import(`./locales/${lang}.js`);<br>} - ❌ 危险写法:路径来自未校验的用户输入
import(`./modules/${userInput}.js`); // 构建工具无法分析,可能报错或打包整个目录
必须处理加载失败的情况
网络中断、路径错误、模块不存在都会导致 Promise reject,不捕获会引发未处理异常。
- 用
try/catch包裹await import():try {<br> const chart = await import('echarts');<br> chart.init(el);<br>} catch (err) {<br> console.warn('图表库加载失败,降级为静态图');<br> showStaticChart();<br>} - 用
.catch()处理链式调用:import('./feature.js')<br> .then(m => m.enable())<br> .catch(() => console.log('功能不可用'));
常见搭配场景
条件动态导入最常用于以下实际需求:
- 权限控制:只有管理员才加载管理后台模块
- 环境区分:开发环境加载调试面板,生产环境跳过
- 功能开关:根据配置项决定是否加载 AI 辅助、离线缓存等重型能力
- 多语言切换:用户切换语言时按需加载对应 locale 文件











