动态导入路径不支持任意变量拼接，仅支持模板字符串中嵌入变量且需构建工具能静态分析所有可能路径；否则导致代码分割失效、模块加载失败或被忽略。
动态导入的模块路径**不支持任意变量拼接**，但**支持模板字符串中嵌入变量**——前提是构建工具能静态分析出所有可能路径，否则代码分割失效、模块加载失败或被忽略。
为什么不能直接用变量拼接路径
ES 模块的 import() 虽是运行时函数，但 Webpack、Vite 等构建工具依赖**静态可分析性**来生成独立 chunk。如果写成 import('./' + name + '.js') 或 import(someVar)，工具无法确定要打包哪些文件，结果往往是：
- 整个模块被忽略，不生成新 chunk，请求 404
- 回退到全量打包，失去按需加载意义
- 开发时看似正常（浏览器原生支持），构建后出问题
安全可用的动态路径写法
核心原则：**路径结构固定，仅替换白名单内的片段**。常见合规模式：
-
模板字符串 + 字面量前缀：
import(`./routes/${page}.js`)—— 工具能识别./routes/下所有.js文件（需配合import.meta.glob或require.context显式声明） -
数组映射 + 白名单校验：
const validPages = ['home', 'profile', 'settings']; if (validPages.includes(page)) import(`./pages/${page}.js`) -
固定前缀 + 枚举后缀：
import(`./locales/${lang}.json`)，配合 Vite 的import.meta.glob('./locales/*.json')预收集
常见坑与对应避坑方法
避开运行时错误和构建陷阱，关键在三处：
-
路径解析错误：动态路径是相对于当前模块文件，不是 HTML 页面或 base URL。建议统一用
./开头，避免../或绝对路径混淆 -
缺少文件后缀：浏览器环境下必须显式写
.js或.json；Node.js 支持省略，但跨平台项目应保持一致 -
用户输入污染路径：若
page来自 URL 参数或表单，务必先过滤、校验、转义，禁止直接拼入路径。例如用正则/^[a-z0-9-]+$/i限制命名格式
推荐落地组合（Vite 场景）
兼顾灵活性与安全性，可这样组织：
- 用
import.meta.glob('./modules/**.js', { eager: false })预扫描所有模块，返回一个路径映射对象 - 运行时根据业务逻辑查表获取合法路径，再调用
import(path) - 配合
try/catch处理加载失败，降级提示或空模块
这样既保留动态性，又让构建工具全程可控。
