Vue Router 中 import() 必须写成 component: () => import('./views/Home.vue')，因 import() 返回 Promise，需用箭头函数包裹才能被 Vue Router 正确识别为异步组件。
Vue Router 的 import() 语法怎么写才不报错
直接在路由配置里写 component: import('./views/Home.vue') 会报 Promise 不是组件的错——因为 import() 返回的是 Promise，不是 Vue 组件本身。必须用 defineAsyncComponent 或直接在 component 字段里返回一个函数。
- 正确写法是
component: () => import('./views/Home.vue')（注意箭头函数包裹） - 如果用了 Vue 3.1+，也可用
defineAsyncComponent(() => import('./views/Home.vue'))，但非必需 - Webpack 会自动把这种
import()转成独立 chunk；Vite 同样支持，无需额外配置 - 别漏掉括号：写成
component: import('./views/Home.vue')（没箭头函数）会导致路由加载失败且控制台无明显报错
React Router v6 中 lazy 和 Suspense 怎么配对用
lazy 只能接收一个动态 import() 函数，且该函数必须返回默认导出的 React 组件；Suspense 必须包裹所有可能触发懒加载的路由出口（通常是 Outlet 或 element 渲染位置）。
- 路由定义要这样：
element: <suspense fallback="{<div">Loading...}><outlet></outlet></suspense>，然后子路由用lazy: () => import('./Dashboard') -
fallback内容不会自动继承父级样式，需手动加 class 或内联样式保证布局稳定 - 如果懒加载模块里有
export default function Dashboard() {...}没问题；但如果有命名导出或导出对象，lazy会报Element type is invalid - 开发时开启
React.StrictMode可能导致Suspense触发两次加载（双渲染），这是预期行为，上线构建后消失
路径前缀变化时（比如从 /admin 改成 /manage），懒加载 chunk 名会冲突吗
Webpack 默认 chunk 名只取决于 import() 路径字符串，和实际路由 path 无关。所以改路径前缀本身不影响 chunk 生成，但如果你在 import() 里拼接了变量（比如 import(`./pages/${type}.vue`)），就得小心魔法注释。
- 推荐显式加 webpackChunkName 注释：
import(/* webpackChunkName: "admin-home" */ './views/AdminHome.vue') - Vite 用户对应写：
import(/* @vite-ignore */ './views/AdminHome.vue')并配合build.rollupOptions.output.manualChunks控制命名 - 如果多个路由 import 同一文件（比如不同路径都指向
NotFound.vue），它们会复用同一个 chunk，不是重复打包 - 注意：服务端渲染（SSR）场景下，
import()在 Node 端执行会失败，必须用defineComponent+ssr: false或单独处理
路径级懒加载真正难的不是写法，是 chunk 边界划分——比如把权限校验逻辑和组件一起打包进去，结果用户没权限也下载了整块代码。这时候得靠 import() 前置条件判断，或者拆更细粒度的模块。
立即学习“前端免费学习笔记（深入）”；
