import() 不能直接写在路由配置里，因其返回 Promise 而路由期望同步组件；需封装为函数或用 defineAsyncComponent/lazy；加载失败须加错误边界或 .catch()；SSR 中需禁用 import() 防崩溃。
为什么 import() 不能直接写在路由配置对象里
因为大多数前端路由库（比如 Vue Router 的 routes 数组或 React Router 的 element 配置）期望的是同步组件定义，而 import() 返回的是 Promise。直接写 component: import('./Foo.vue') 会导致路由无法识别组件，甚至报错 Invalid component definition 或白屏。
真正能用的，是把 import() 包进一个返回 Promise 的函数里，让路由系统知道“这个组件要异步加载”。
- Vue Router：必须用
defineAsyncComponent或直接传函数() => import('./Foo.vue') - React Router v6.4+：
element不支持异步，得配合lazy+Suspense，但lazy(() => import('./Foo.tsx'))本质仍是import()的封装 - 纯原生 JS 路由（如
page.js或自研）：需手动await import()后挂载，不能靠配置自动 resolve
import() 加载失败时页面卡死？必须加错误边界
动态导入失败（如网络中断、路径拼错、模块抛错）会变成未捕获的 Promise rejection，React 会白屏，Vue 可能显示空白或报 TypeError: Cannot load module，但不会 fallback。
实际项目中，不处理加载失败 = 用户点击就失联。
立即学习“前端免费学习笔记（深入）”；
- React：在
Suspense外层套ErrorBoundary，捕获import()抛出的 error - Vue：用
defineAsyncComponent的error选项，或在setup()中 try/catchimport() - 通用做法：给
import()加 .catch()，返回一个兜底组件（如{ default: Fallback }），避免整个 chunk 加载链断裂
Webpack/Vite 对 import() 的代码分割行为有隐式规则
不是所有 import() 都会生成独立 chunk。打包工具会按模块依赖图做合并，有时多个 import('./a') 和 import('./b') 会被打到同一个文件里，尤其当它们引用了相同公共模块时。
想确保严格分离，得干预 chunk 名称：
- Webpack：用魔法注释
/* webpackChunkName: "user" */，例如import(/* webpackChunkName: "user" */ './UserPage.vue') - Vite：等价写法是
import(/* @vite-ignore */ './UserPage.vue')不起作用；正确方式是加/* @vite-ignore */仅用于类型提示，chunk 名靠build.rollupOptions.output.manualChunks控制，或用import('./UserPage.vue').then(...)+ Vite 默认的基于文件名的分割策略 - 注意：路径必须是字符串字面量，不能是变量拼接，否则 Webpack/Vite 无法静态分析，会退化成大包
服务端渲染（SSR）下 import() 会失效或报 ReferenceError: window is not defined
Node.js 环境不支持浏览器端的 import() 动态语法（ESM 动态导入在 Node 里需启用 --experimental-import-meta-resolve，且 SSR 框架通常不兼容）。Vite 的 ssr: true 模式会尝试模拟，但仍有风险。
真实 SSR 场景中，必须区分环境：
- Vue：SSR 时用
defineAsyncComponent({ ssr: false })关闭服务端加载，或改用serverPrefetch手动预取 - Next.js：用
dynamic(..., { ssr: false })，否则import()在 getServerSideProps 里直接报错 - 关键点：SSR 期间所有路由组件必须能同步 require，所以真正的代码分割只发生在客户端 hydration 之后
没做环境判断就上线 SSR 应用，import() 很可能让首屏直出直接崩溃。
