<p>Vue Router 本身不直接管理分包命名，该能力由 Webpack（或 Vite 等构建工具）提供；通过 / webpackChunkName: "xxx" / 注释可将同名异步模块合并为同一 chunk 文件，如 user.[hash].js，提升加载效率与缓存复用。</p>
Vue Router 本身不直接管理分包命名，这个能力来自 Webpack（或 Vite 等构建工具）对动态 import() 的解析。你只需在 import() 调用前添加特定注释，Webpack 就会把同名的异步模块合并进同一个 chunk 文件中。
用 webpackChunkName 注释指定名称
在路由配置中，把组件写成动态 import 形式，并在括号内加入 /* webpackChunkName: "xxx" */ 注释：
const User = () => import(/* webpackChunkName: "user" */ './views/User.vue')const Profile = () => import(/* webpackChunkName: "user" */ './views/Profile.vue')
这样，User.vue 和 Profile.vue 会被 Webpack 打包进同一个名为 user.[hash].js 的 chunk 中，而不是各自生成独立文件。
命名规则与注意事项
chunk 名称会直接影响最终生成的文件名（如 user.abc123.js），需注意以下几点：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
立即学习“前端免费学习笔记（深入）”；
- 名称只能包含字母、数字、下划线和短横线，避免空格或特殊符号
- 相同名称的
import()会被自动归入同一 chunk，适合语义相关的一组页面（如用户中心下的多个子页） - 若未加注释，Webpack 默认按路径生成 chunk 名（如
views-User-abc123.js），可读性差且不易维护
配合 Vue Router 的实际写法
在 routes 配置里直接使用即可，无需额外配置 router：
{ path: '/user', component: () => import(/* webpackChunkName: "user" */ './views/User.vue') }{ path: '/user/profile', component: () => import(/* webpackChunkName: "user" */ './views/Profile.vue') }
只要 chunk 名一致，构建时它们就会被打包到一起，加载其中一个时，另一个也会被顺带下载，减少后续跳转的请求数。
其他构建工具的等效写法
如果你用的是 Vite，对应注释是 /* @vite-ignore */ 或直接依赖其默认分包逻辑；Rollup 则用 /* rollup-plugin-visualizer */ 类插件辅助分析。但主流 Vue 项目仍以 Webpack 为主，webpackChunkName 是最通用、最稳定的方式。
