Vue3路由级代码分割通过动态import()实现懒加载，将每个路由组件拆分为独立JS文件，仅在访问时加载。
这种技术能显著减少初始加载体积，提升首屏速度，并优化缓存策略。
构建工具会自动生成单独chunk文件，如About.[hash].js，无需额外配置即可在Vite+Vue3项目中开箱使用。
该方案通过按需加载机制有效平衡性能与用户体验。
在Vue3项目路由中，看到如下注释
Vue3 路由
router/index.ts
route level code-splitting
this generates a separate chunk (About.[hash].js) for this route
which is lazy-loaded when the route is visited.
在 Vue 3 中，路由级别的代码分割（Route-level Code Splitting）是一种优化应用性能的重要技术。它通过懒加载（Lazy Loading）的方式，将不同路由对应的组件拆分成独立的 JavaScript 文件（即“chunks”），只有当用户访问该路由时，才动态加载对应的代码。
基本原理
默认情况下，如果不使用代码分割，所有路由组件都会被打包进一个主 bundle（如app.js）中，导致首屏加载时间变长、带宽浪费。
而通过动态import()语法配合 Vue Router，可以实现按需加载：
// router/index.js (Vue 3 + Vue Router 4) import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', component: () => import('../views/Home.vue') // 懒加载 Home 组件 }, { path: '/about', component: () => import('../views/About.vue') // 懒加载 About 组件 } ] const router = createRouter({ history: createWebHistory(), routes }) export default router发生了什么？
当你写成：
component: () => import('../views/About.vue')构建工具（如 Vite 或 Webpack）会：
- 识别动态 import；
- 为
About.vue单独生成一个 chunk 文件，例如：About.abc123.js（其中abc123是内容哈希）； - 主 bundle 中只保留加载逻辑，不包含
About.vue的实际代码； - 当用户首次访问
/about路由时，浏览器才会发起请求加载这个 chunk，并渲染组件。
这就是所谓的“route-level code-splitting”。
✅ 优点
- 减少初始加载体积：提升首屏加载速度；
- 按需加载：节省用户带宽，尤其对移动端友好；
- 更好的缓存策略：每个 chunk 可独立缓存，更新一个页面不影响其他 chunk 的缓存。
补充技巧
1. 自定义 chunk 名称（Webpack / Vite）
你可以通过注释指定 chunk 名称，便于调试或分组：
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')注意：Vite 默认忽略
webpackChunkName，但支持原生的动态 import 分块，通常无需额外配置。
2. 预加载（可选）
Vue CLI 或 Vite 可配置预加载策略（如 hover 时预加载），但默认是“访问时加载”。
构建后效果示例
构建后输出可能如下：
1dist/ 2├── assets/index.hash.js # 主入口 3├── assets/Home.hash.js # 首页 chunk 4├── assets/About.hash.js # About 页面 chunk（懒加载） 5└── index.html只有访问/about时，About.hash.js才会被加载。
总结
Route-level code-splitting in Vue 3就是通过
() => import('...')实现路由组件的懒加载，让每个路由对应一个独立的 JS chunk，在访问时才加载，从而优化应用性能和用户体验。
如果你使用的是Vite + Vue 3 + Vue Router 4，这种写法开箱即用，无需额外配置！
