路由级别代码分割本质是按需加载路由组件，核心靠动态import()触发异步加载并由打包工具拆分为独立chunk；需配合路由框架、命名chunk、suspense处理加载态，并避免过度分割。
路由级别代码分割，本质是让每个路由对应的视图只在用户真正访问时才加载，不提前塞进首屏包里。核心靠动态 import() 语法触发异步加载，再由路由框架识别并配合处理。
用动态 import 替代静态导入
静态 import 在构建时就确定依赖，全部打进主包；动态 import() 是运行时调用，Webpack 或 Vite 能自动把它拆成独立 chunk。
- ❌ 错误写法（首页和详情页一起加载）：
import About from './pages/About.vue';{ path: '/about', component: About } - ✅ 正确写法（访问 /about 才拉取）：
{ path: '/about', component: () => import('./pages/About.vue') }
给 chunk 命名，稳定缓存
默认 chunk 名含 hash，每次构建都变，导致浏览器无法复用缓存。加 Webpack 魔法注释可固定名称：
component: () => import(/* webpackChunkName: "about" */ './pages/About.vue')- 打包后生成
about.[hash].js，内容不变时 hash 不变，CDN 和浏览器缓存更有效
配合 Suspense 处理加载状态
异步加载有延迟，需提供加载中提示，避免白屏或卡顿：
- Vue：在
<router-view></router-view>外套<suspense></suspense>，用fallback显示 loading - React：用
<suspense fallback="{...}"><routes>...</routes></suspense>包裹路由出口 - 注意：
Suspense必须包裹能触发异步操作的组件，不能只包普通 JSX
避免过度分割，守住合理边界
不是每个路由都必须单独拆——首页、登录页这类高频入口建议保留在主包，减少首次请求次数；而“设置”“报表导出”“系统日志”等低频页面才适合懒加载。
- 首页组件可保持静态导入，确保最快渲染
- 带参数的路由（如
/user/:id）也适用动态 import，Vue Router 和 React Router 都原生支持 - 若某路由组件极小（
