动态导入路由组件可实现懒加载，使首屏仅加载当前页面代码；写法为component: () => import('@/views/home.vue')，配合webpackchunkname注释命名chunk，支持按功能分组打包和自动预加载。
直接把路由组件改成动态导入，就能让首屏只加载当前页面所需代码，避免用户打开首页时被迫下载全部页面逻辑。
懒加载的核心写法
把原来静态引入的组件，换成箭头函数 + import() 动态导入：
- 非懒加载（全部打进主包）：
component: Home或component: require('./views/Home.vue') - 懒加载（生成独立 chunk）：
component: () => import('@/views/Home.vue')
Vue 和 Webpack 会自动识别这种写法，将对应组件打包成单独的 JS 文件，访问该路由时才发起请求并执行。
给 chunk 命名便于调试和缓存
加 webpackChunkName 注释，能让生成的文件有明确名称，比如：
component: () => import(/* webpackChunkName: "user-module" */ '@/views/User.vue')- 打包后可能生成
user-module.123abc.js这样的文件，方便定位、分析加载行为，也利于长期缓存控制
按功能分组打包更合理
如果多个页面属于同一模块（比如用户中心的资料页、设置页、安全页），可共用一个 chunk 名：
component: () => import(/* webpackChunkName: "user-center" */ '@/views/Profile.vue')component: () => import(/* webpackChunkName: "user-center" */ '@/views/Settings.vue')- Webpack 会把它们合并进同一个 chunk，减少请求数，避免过度拆分
配合预加载进一步优化体验
对用户大概率会访问的页面（如首页跳转后的「订单页」），可在路由配置中启用预加载：
- Webpack 5+ 默认开启
<link rel="prefetch">，会在空闲时提前下载对应 chunk - 无需额外配置，只要用了
import()，且目标 chunk 不太大，就会自动触发预加载 - 若需手动控制，可通过
/* webpackPrefetch: true */显式开启
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
