vue 3 项目初始化时应配置按需加载与代码分割：1. vite 脚手架启用异步路由；2. 组件级懒加载配合 suspense 和 defineasynccomponent；3. 手动拆分 vendor 与第三方库；4. ui 库按需引入而非全局注册。
Vue 3 项目初始化阶段就配置好按需加载与代码分割，能从源头控制首屏体积、避免后期重构成本。关键不在于“加功能”，而是在脚手架生成时选对构建策略、路由结构和组件加载方式。
用 Vite 初始化时直接启用异步路由
Vite 是当前 Vue 3 官方推荐的脚手架（npm create vue@latest），它默认支持 ES 动态导入，无需额外插件即可实现路由级懒加载。
- 创建项目时勾选 Vue Router，Vite 模板会自动生成带
import()的路由配置 - 确保路由定义写成函数形式，例如：
{ path: '/about', component: () => import('./views/About.vue') } - 不要写成
component: About或import About from './views/About.vue'，否则会打包进主 chunk
组件级懒加载配合 Suspense 使用
不是所有组件都适合一开始就加载，尤其是一些弹窗、图表、富文本编辑器等重型模块，应在需要时才拉取。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在模板中用
<suspense></suspense>包裹异步组件，并提供#fallback内容 - 使用
defineAsyncComponent显式声明懒加载组件，便于统一错误处理和 loading 状态 - 示例：
const HeavyChart = defineAsyncComponent(() => import('@/components/HeavyChart.vue'))
构建时拆分 vendor 与第三方库
初始化后立即配置 build.rollupOptions.output.manualChunks（Vite）或 optimization.splitChunks（Vue CLI），把稳定依赖单独抽离。
- 将
vue、vue-router、pinia打包进chunk-vendors - 对体积大的 UI 库（如
ant-design-vue、vxe-table）单独拆 chunk，避免污染主包 - 设置
minSize和maxSize防止过度切片，建议minSize: 10000（10KB）起拆
按需引入 UI 组件库（非全局注册）
很多 UI 库（如 Element Plus、Ant Design Vue）支持按需导入，初始化时就应放弃 app.use(Component) 全局注册方式。
- 用
unplugin-vue-components+unplugin-auto-import实现组件与 API 自动导入 - 或手动只引入用到的组件，例如：
import { ElButton, ElInput } from 'element-plus'，再通过app.component局部注册 - 避免
import ElementPlus from 'element-plus'这类全量引入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
