大型Vue应用性能调优核心在于按需加载，即路由懒加载、模块化拆分、语言/主题/图片等资源动态加载，并通过Webpack/Vite合理配置splitChunks、禁用prefetch、启用精准preload来保障效果。
大型 Vue 应用性能调优的核心，不在于压缩单个文件，而在于让代码“该出现时才出现”。拆分策略不是技术炫技，而是对用户行为和资源加载节奏的精准预判。关键不在“拆多少”，而在“怎么拆、何时载、如何管”。
路由级懒加载：最直接有效的首屏减负
这是绝大多数后台系统最先见效的优化点。把每个视图组件从主包中剥离，访问对应路由时才加载。
- 写法统一用动态 import：
component: () => import('@/views/dashboard/index.vue')，不要用 require 或静态引入 - 配合 Webpack 的
splitChunks配置，确保第三方库（如 element-ui、lodash）被单独抽成chunk-elementUI或chunk-libs，避免重复打包 - 隐藏路由（如登录页、404）同样适用懒加载，它们虽不常驻导航，但首次访问仍需快速响应
模块化业务拆分：让功能边界清晰可维护
当项目按功能域（如 user、order、report）划分目录后，拆分就不再只是技术动作，而是工程治理。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 每个模块内聚：包含自己的 views、components、store/modules、router.js，对外只暴露标准接口
- 路由配置支持模块注入：
children: [...userRouter]，而非全部堆在根 router 文件里 - 状态管理采用 namespaced Vuex 模块，避免全局命名冲突，也便于按模块动态注册或卸载
语言包与静态资源的按需加载
国际化和主题资源往往被忽略，却是影响初始体积的隐形大户。
立即学习“前端免费学习笔记（深入）”；
- Vue I18n 不预加载全部语言，只在应用启动时载入默认语言（如 zh-CN），切换语言时再
import(`./locales/${lang}.json`) - 深色主题、图标字体、大尺寸图表库（如 ECharts）等非核心资源，用动态 import 包裹，延迟到用户触发相关功能时加载
- 图片资源启用
loading="lazy"，SVG 图标优先使用内联或 symbol 引用，减少 HTTP 请求
构建时代码分割配置要点
Webpack 或 Vite 的配置决定了拆分是否真正生效，不能只靠写法。
- 关闭 prefetch 插件：
config.plugins.delete('prefetch')，否则浏览器会预取所有路由 chunk，抵消懒加载效果 - 启用 preload 插件，但限定范围：
include: 'initial'，只预加载 runtime 和 vendor 等关键资源 - 设置
minSize和maxInitialRequests，防止生成过多小文件；例如将公共工具函数（utils/request、utils/auth）自动归入chunk-commons
