Vue Router 中实现路由组件的懒加载有哪些具体方式？请说明每种方式的写法和适用场景。

回答思路

1. 【回答框架 1】懒加载是路由级代码分割，通过动态 import 将组件代码拆成独立 chunk，在路由被访问时才加载，减少首屏体积。Vue Router 支持在路由配置的 component 字段中使用动态 import 语法，如 component: () => import('./views/Home.vue')。
2. 【回答框架 2】在 Vue 2 中也可以使用 webpack 的 require.ensure 语法，但 Vue 3 和 Vue Router 4 已推荐并大量使用动态 import。对于多路由共享组件，可使用命名 chunk 来合并打包，例如 const Home = () => import(/* webpackChunkName: 'group-home' */ './views/Home.vue')。
3. 【回答框架 3】对于组件级懒加载（非路由），可以使用异步组件，但路由懒加载的核心就是动态 import。路由懒加载的适用场景是大型应用的首屏优化，尤其适合路由数量多且各页面独立的情况。
4. 【回答框架 4】需要注意事项：动态 import 返回 Promise，但路由组件必须默认导出才能正常加载；如果项目使用其他打包工具（如 Vite 或 Rollup），动态 import 同样有效，只是 chunk 命名方式可能有所不同。
5. 【回答框架 5】实际开发中，可结合路由懒加载和 webpack 的 splitChunks 优化，将公共库单独分包，进一步优化加载效率。但懒加载并非万能，过度拆分会导致请求过多，需权衡按需加载与请求数量之间的平衡。
6. 【关键点 1】动态 import 是实现路由懒加载的推荐方式
7. 【关键点 2】webpackChunkName 注释可指定打包出的 chunk 名称
8. 【关键点 3】懒加载适用于大型应用按需加载页面代码
9. 【关键点 4】懒加载必须搭配默认导出的组件才能在路由中正常渲染
10. 【易错点 1】将懒加载误解为所有页面的自动优化，未考虑构建配置可能无法正确处理动态 import
11. 【易错点 2】忽略动态 import 的 Promise 形态，导致组件未默认导出时路由无法加载
12. 【易错点 3】过度拆分包造成大量小请求，应通过合并 chunk 或预加载策略平衡性能