路由懒加载是通过动态import()实现按需加载组件，使Webpack自动拆分chunk，降低首屏时间；需在Vue Router中用箭头函数包裹import，配合webpackChunkName、SplitChunksPlugin等优化分包。
路由懒加载是解决单文件体积过大最直接有效的方式之一，它让页面按需加载，避免初始包中塞入全部业务代码，显著降低首屏加载时间。
什么是路由懒加载？
懒加载本质是动态 import() 语法的使用——把原本同步引入的组件，改为异步加载。Webpack 会自动将该模块拆分为独立的 chunk 文件，在路由匹配到时才发起请求下载。
比如传统写法：
const Home = () => import('@/views/Home.vue')这样 Webpack 就不会把 Home.vue 及其依赖打包进 main.js，而是生成一个类似 2.abc123.js 的独立文件。
Vue Router 中正确配置懒加载
在定义路由时，component 字段必须是一个返回 Promise 的函数（即箭头函数包裹 import），否则无法触发分割：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- ✅ 正确：
component: () => import('@/views/UserProfile.vue') - ❌ 错误：
component: import('@/views/UserProfile.vue')（同步执行，无分割） - ❌ 错误：
component: require('@/views/UserProfile.vue')（CommonJS 方式，不支持自动分包）
多个路由共用同一组件时，Webpack 默认会为每个 import 创建独立 chunk。可通过 webpackChunkName 注释统一命名，触发合并：
component: () => import(/* webpackChunkName: "user" */ '@/views/UserProfile.vue')配合 Webpack 进行更精细的分包控制
懒加载只是起点，还需结合 Webpack 配置进一步优化：
- 启用 SplitChunksPlugin：默认已开启，可自定义 chunks: 'all' + cacheGroups 拆分第三方库（如 ant-design-vue、lodash）
- 设置 chunkFilename：让输出文件名带 hash，便于长期缓存，例如
js/[name].[contenthash:8].js - 使用 prefetch/preload（谨慎）：对用户极可能访问的路由加
/* webpackPrefetch: true */，浏览器空闲时预加载
注意：prefetch 不适合首屏关键路由，容易抢占带宽；preload 更适合当前页面即将用到的资源（如模态框组件）。
验证是否生效 & 常见陷阱
构建后检查 dist 目录：应看到多个小于 100KB 的 js/chunk 文件，而非一个超大 app.js。
- Chrome DevTools → Network → 切换 JS 类型，点击某个路由，观察是否加载了新 chunk
- 运行
npm run build -- --report（需 vue-cli-service 配置），打开 report.html 查看各 chunk 构成 - 常见问题：Babel 转译导致 import() 失效 → 确保 .babelrc 或 babel.config.js 包含
@babel/plugin-syntax-dynamic-import - SSR 场景下需用 vue-router 的异步组件 + 服务端渲染适配，否则首屏直出失败
不复杂但容易忽略。只要路由级组件全走 import()，再辅以合理的 SplitChunks 配置，90% 的单文件过大问题就能明显缓解。
