动态导入路径必须可静态分析，即 import() 的字符串参数需在构建时确定，如 import(./pages/${pagename}.js)（pagename 为有限枚举）；而 import('./'+folder+'/'+name+'.js') 或 import(dynamicpath) 等运行时路径则不被支持。
动态导入的变量路径必须可静态分析
打包工具如 Webpack 和 Vite 在构建阶段不执行代码，而是通过 AST 静态解析 import() 调用。因此，传给 import() 的字符串参数必须在构建时能被确定具体值，不能是完全运行时才生成的任意表达式。
例如以下写法会被正确识别并分包：
-
import(`./pages/${pageName}.js`)—— 变量pageName若为有限枚举（如'home'、'about'、'contact'），工具可推断出所有可能路径 -
import(`../locales/${lang}/messages.json`)—— 若lang来自预定义数组且上下文明确，Webpack 的require.context类机制或 Vite 的 glob 模式也能覆盖 -
import(`./components/${type}/index.vue`)—— 在 Vue 项目中配合目录结构约束，Vite 通常能处理
但这些写法会失败或被忽略：
-
import('./' + folder + '/' + name + '.js')—— 字符串拼接过于松散，无法静态提取有效路径 -
import(dynamicPath)——dynamicPath是运行时计算的变量，构建期无从得知内容 -
import(urlStringFromAPI())—— 完全依赖网络响应，彻底脱离静态分析范围
使用魔法注释辅助路径提示
当变量路径存在不确定性但你希望引导打包工具生成合理 chunk 时，可结合 Webpack 的 魔法注释（magic comments）提供线索：
-
/* webpackChunkName: "pages-[request]" */：让 Webpack 将匹配到的模块按请求名命名 chunk，便于调试和缓存控制 -
/* webpackMode: "lazy" */：显式声明为懒加载模式（默认行为，但可增强语义） -
/* webpackPrefetch: true */：标记为预获取，在浏览器空闲时提前加载
示例：
const mod = await import(/* webpackChunkName: "feature-[request]" */ `./features/${id}.js`);避免常见陷阱
即使路径含变量，也需注意语法与作用域限制：
- 不能放在模块顶层：import() 必须出现在函数作用域内（如事件处理器、组件 setup、路由守卫），否则报错
-
不支持直接解构：不能写
const { fn } = await import('./utils.js')，必须先 await 得到模块对象再取属性 -
JSON 或非 JS 资源需插件支持：如要 import JSON，Vite 默认支持；Webpack 需启用
parser.parse或配置Asset Modules -
Rollup 对变量路径更严格：它默认不解析带变量的 import()，除非使用
@rollup/plugin-dynamic-import-vars插件显式启用
验证是否生效的小技巧
打包后检查 dist 目录或使用分析工具确认效果：
- 运行
npx webpack-bundle-analyzer dist/stats.json（Webpack）或npx vite-bundle-analyzer（Vite），查看是否有对应 chunk 生成 - 打开浏览器开发者工具 → Network 标签页，触发动态导入逻辑，观察是否发起新 JS 请求，且文件名含预期关键词
- 在控制台执行
import('./nonexistent.js').catch(e => console.log(e))，若报错提示“Cannot find module”，说明路径已被打包工具索引；若报错为网络 404，则路径未被识别或未生成对应文件
