路由懒加载通过动态import实现按需分包，使各路由资源独立打包、首屏仅加载必要代码；配合命名chunk、css分包及构建配置优化，可显著降低首屏体积与加载时间。
路由懒加载是实现资源按需分包最直接、最有效的方式——它让每个路由对应一个独立的 JS（和 CSS）代码块，用户首次打开页面时，只加载首页相关资源，其余路由代码等到真正访问时才拉取。
核心机制：动态 import + 构建工具自动分包
Vue Router 本身不负责打包，它只是配合构建工具（Webpack 或 Vite）触发代码分割。关键在于写法：
- 用 const Page = () => import('./Page.vue') 替代 import Page from './Page.vue'
- 构建工具识别到
import()后，会把该模块单独抽成一个 chunk 文件（如1234.abcd.js） - 这个 chunk 不会打进
app.js或vendor.js，首屏体积自然下降
命名 chunk，便于识别和优化
光拆分还不够，建议给懒加载模块起名，方便后续分析和缓存管理：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
加注释提示：
import(/* webpackChunkName: "user" */ './views/User.vue') - Vite 用户可写：
import('./views/User.vue').then(...)，配合build.rollupOptions.output.manualChunks统一归类 - 同名 chunk（如多个 user 相关页面）会被合并，避免碎片化请求
CSS 也要跟着分包，否则白忙一场
如果组件内样式或全局样式没做处理，它们仍可能被塞进主包，抵消 JS 懒加载效果：
- 确保构建配置启用 CSS 分割：Webpack 用
MiniCssExtractPlugin，Vite 开启build.cssCodeSplit: true（默认已开） - 避免在
main.js或App.vue中import 'theme.css'—— 改为link rel="preload"或动态插入 - 组件内
<style></style>会随组件一起被打包，天然跟随懒加载节奏
验证是否生效的简单方法
打包后看 dist 目录结构和 network 面板：
- dist 下应出现多个
xxx.xxxxxx.js和xxx.xxxxxx.css文件，而非只有app.xxx.js - 打开首页，network 中只看到主资源；切换到 /about 路由，才会看到
about.xxxxxx.js发起请求 - 用 Lighthouse 测首屏时间，对比懒加载前后，通常能降 50%～70%
