组件懒加载和路由懒加载是粒度不同、可协同使用的按需加载策略：前者按功能模块延后加载页面内非首屏子组件，后者按路由路径分页加载对应页面组件；判断依据是加载触发点——url变化用路由懒加载，用户交互用组件懒加载。
组件懒加载和路由懒加载不是互斥关系，而是粒度不同、作用位置不同的两种按需加载策略。路由懒加载解决“进哪个页面才加载哪个页面”，组件懒加载解决“页面里哪些模块该延后加载”。两者可以同时存在，配合使用效果更佳。
路由懒加载：按页面切分代码块
它发生在路由配置阶段，把每个路由对应的整个页面组件（如UserList.vue、OrderDetail.vue）单独打包成一个 chunk。用户首次访问 /home 时，只加载首页逻辑；跳转到 /user 时，才发起网络请求拉取 UserList 组件代码。
- Vue 3 写法统一用 动态 import()：
component: () => import('@/views/UserList.vue') - 不写懒加载，所有页面组件会全被打进 app.js，首屏体积暴涨
- 适合中后台项目——菜单多、页面多、但用户每次只看 1～2 个页面
组件懒加载：按功能模块切分页面内部
它发生在模板或逻辑层，针对某个页面中“非首屏必需”的子组件（比如弹窗、大数据表格、富文本编辑器），让它们在触发条件满足时再加载。即使用户已进入 /order 页面，其中的「物流轨迹图」组件默认也不加载，直到点击“查看物流”按钮才开始拉取。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- Vue 3 推荐用 defineAsyncComponent 包裹：
const LogisticsMap = defineAsyncComponent(() => import('@/components/LogisticsMap.vue')) - 常配合
v-if或事件监听控制渲染时机，避免提前初始化 - 适合详情页、表单页等含重型 UI 模块的场景
怎么判断该用哪一种？看加载触发点
关键看“谁决定这个资源该不该现在加载”：
- 由 URL 路径变化 触发 → 选路由懒加载（如从 /dashboard 切到 /report）
- 由 用户交互或状态变化 触发 → 选组件懒加载（如点击按钮打开抽屉、切换 Tab 显示图表）
- 一个页面可同时用两种：路由级拆出 /product，组件级再懒加载其中的 ReviewList 和 SimilarGoods
构建和运行时的实际表现
两者都依赖构建工具（Vite/Webpack）的代码分割能力，最终都会生成独立的 .js chunk 文件。区别在于：
- 路由懒加载的 chunk 名称通常带 page- 或按文件路径生成（如
src_views_UserList_vue.abc123.js） - 组件懒加载的 chunk 更细，可能命名为
src_components_LogisticsMap_vue.def456.js - 浏览器 DevTools 的 Network 面板能清晰看到：路由跳转时加载 page-chunk；点击按钮后加载 component-chunk
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
