组件懒加载按权限分块的核心是将加载逻辑与用户权限绑定，通过路由级权限校验、构建时角色分包、运行时加载拦截及服务端协同鉴权，实现敏感模块的动态可控加载与安全防护。

组件懒加载按权限分块，核心是把路由或组件的加载逻辑与用户权限绑定，避免未授权用户下载敏感模块代码。关键不在“怎么懒加载”，而在“谁有资格加载”。

权限前置：路由级动态加载控制

在定义路由时，不直接写死 component，而是用函数返回 Promise，并在函数内校验权限：

• 用户登录后拿到角色或权限列表（如 ['user:profile', 'admin:dashboard']）并存入全局状态或 pinia/vuex
• 路由配置中使用 component: () => checkAuth('admin:dashboard').then(() => import('@/views/Admin.vue'))
• checkAuth 函数同步判断权限是否存在，无权限则抛错或重定向到 403 页面，Webpack 不会为此 chunk 生成独立文件

构建时分包：基于角色拆分 chunks

利用 Webpack 的 splitChunks + 动态 import() 注释，让不同权限组的组件被打包进不同 chunk：

• 在 import 时添加 webpackChunkName 注释：import(/* webpackChunkName: "admin-chunk" */ '@/views/Admin.vue')
• 配合 splitChunks.cacheGroups 配置，将含 “admin-” “editor-” 命名的 chunk 单独提取
• 部署时可对敏感 chunk（如 admin-chunk.js）启用服务端鉴权（如 Nginx 校验请求头中的 token 或 role），未通过则 403

运行时拦截：防止手动拼 URL 绕过路由守卫

仅靠前端路由守卫不够，需叠加运行时加载防护：

• 封装统一的 loadAuthorizedComponent 方法，内部调用 import 前再次校验权限（防 localStorage 被篡改）
• 对异步组件加载失败做统一处理：捕获 chunkLoadError，检查是否因权限拒绝导致，引导用户登出或提示无访问权限
• 敏感页面的组件内部不暴露 API 调用逻辑，所有接口请求也走权限网关，实现前后端双重校验

服务端协同：预加载策略与权限感知 CDN

进一步提升体验与安全，可结合服务端能力：

• 用户登录成功后，后端返回其可访问的路由白名单和对应 chunk 名称，前端只预加载这些 chunk（Promise.all(whitelist.map(name => import(`./chunks/${name}.js`)))）
• CDN 层根据请求携带的 role header 或 cookie，决定是否返回 chunk 文件，或返回混淆/空内容
• 对高敏模块（如财务、审计页），chunk 文件名用哈希+权限标识（如 audit-2a7f3b.min.js），且不列入 public 目录，由后端代理下发