在 Vite 中按路由懒加载分包

目标

初始包包含全部路由，导致一个简单落地页也下载了后台与设置代码。本配方把静态导入改为动态导入，使每个路由成为独立分块、仅在访问时加载，再用构建产物分析验证入口包不再包含后台代码；提醒每次导航会多一次往返，需为加载提供兜底界面。

步骤要点

1. 把路由的静态导入改为动态导入。
2. 用构建产物分析验证入口包缩小。
3. 预加载可能的下一路由并提供兜底界面。
4. 把相关视图合并为共享分块避免请求瀑布。

const routes = [
  { path: '/', component: () => import('./pages/Home.vue') },
  { path: '/admin', component: () => import('./pages/Admin.vue') },
];

排错提示

• 每次导航多一次往返，需兜底界面。
• 分块过细会形成请求瀑布。
• 重库若在入口包则无效。

适用边界

• 需要加载中的兜底 UI。
• 不解决入口包中的重库。