路由懒加载本质是通过 import() 触发构建工具代码分割，将模块抽为独立 chunk 以减少首屏体积；需配合加载态处理、合理分组命名及防过度拆分。
路由懒加载不是“等用户点开再加载”，而是通过 import() 明确告诉构建工具：“这部分代码，别打进主包，单独切出来”。首屏速度提升的关键，不在于加载多快，而在于初始下载量少了多少——从几MB降到几百KB，才是质变。
import() 不是加载器，是分割信号
很多人误以为 import() 自己完成拆包。实际上它只是触发构建工具执行代码分割的指令。Webpack、Vite 等在打包阶段扫描到 import('./views/About.vue')，就会自动把该模块及其依赖抽成一个独立 chunk（如 about.8a2f3.js），并注入异步加载逻辑。浏览器运行时调用 import()，才真正发起网络请求。
- 静态
import：编译期锁定依赖，全进主 bundle - 动态
import()：运行时决定加载时机，构建期生成独立 chunk - 路径必须可静态分析：支持
import(`./locales/${lang}.js`)，但不支持import(url)（url 是运行时变量）
路由级拆分：最直接有效的减负方式
Vue Router 或 React Router 中，将每个页面组件用 import() 包裹，是最基础也最有效的实践：
{ path: '/home', component: () => import('@/views/Home.vue') }{ path: '/user/profile', component: () => import('@/views/user/Profile.vue') }
这样配置后，用户访问 /home 时，只加载核心框架 + Home 组件 chunk；/user/profile 的代码完全不参与首屏传输。实测大型后台系统可将首屏 JS 体积从 2.1MB 压至 480KB，Lighthouse 首屏时间下降 75%。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
用魔法注释控制 chunk 分组与命名
默认生成的 chunk-123abc.js 不利于调试和缓存管理。通过 Webpack 的魔法注释可精准干预：
import(/* webpackChunkName: "user-pages" */ '@/views/user/Profile.vue')import(/* webpackChunkName: "user-pages" */ '@/views/user/Settings.vue')
两个组件会被合并打包为同一个 user-pages.xxxxx.js，减少 HTTP 请求数。Vite 用户可用 rollupOptions.output.manualChunks 实现类似效果，比如把所有权限相关视图归入 auth-module chunk。
必须配套的用户体验保障
懒加载带来异步性，不能让用户盯着白屏等待。需主动处理加载态和失败场景：
- Vue 中配合
defineAsyncComponent+suspense提供 fallback 内容 - React 中用
React.lazy+ - 对加载失败做降级：捕获
import()的 Promise reject，提示“页面加载异常，请刷新”或跳转兜底页 - 避免过度拆分：单个 chunk 压缩后小于 5KB 时，合并更划算；高频共用模块可加
/* webpackPreload: true */预加载
