Vue 3首屏性能瓶颈主因是非首屏组件全局注册，应仅对高频原子组件全局注册，业务组件改用异步加载或局部导入，并通过插件化管控、规范命名避免无效注册与解析失败。
Vue 3 组件注册对首屏性能的影响，核心不在“怎么注册”，而在于“哪些该注册、何时注册、怎么避免无效注册”。很多大型 SPA 首屏慢，不是因为组件写得复杂，而是把大量非首屏组件提前全局注册，白白撑大主包、拖慢解析和初始化——尤其当这些组件还依赖 heavy 库（比如全量 echarts、vxe-table）时，问题更明显。
别全局注册非首屏组件
全局注册（app.component()）会让组件对象在应用启动时就加载并挂载到上下文，无论是否被用到。一旦注册了 50 个弹窗、图表、工具栏组件，它们的 JS + 模板 + 依赖都会打进首屏 bundle。
- 只对真正高频、跨页面复用的原子组件做全局注册：比如
BaseButton、IconFont、PageHeader - 业务级组件（如
UserDetailDrawer、OrderChart）一律不全局注册，改用局部导入或异步加载 - 检查
main.js或app.ts中的app.component()清单，删掉所有路径含/views/、/modals/、/charts/的注册项
用 defineAsyncComponent 替代静态 import
对非首屏但需在模板中直接使用的组件（比如路由页里的子模块、条件弹出的配置面板），不要 import 后传给 components: {}，而应封装为异步组件：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 模板中仍可写
<UserSettingsPanel />，但实际加载延迟到首次渲染前 - 配合
<Suspense>统一管理 loading 态，避免白屏或布局抖动 - 支持 webpackChunkName 注释或 Vite 的 manualChunks 分组，让这类组件独立成 chunk，不污染主包
按需注册 + 插件化管控
如果团队确实需要“统一注册”风格（比如设计系统组件库），推荐用插件方式替代硬编码注册：
立即学习“前端免费学习笔记（深入）”；
- 写一个
installComponents(app)函数，内部只注册核心原子组件 - 在
main.js中调用它，而不是逐行app.component() - 后续新增组件时，只需修改插件函数，避免漏删或误加；也方便在测试环境禁用部分注册做体积对比
警惕命名冲突与解析失败
注册名和模板标签名不一致、大小写混用、驼峰 vs 短横线写法，都会导致 resolveComponent 失败，Vue 不报错，只当原生标签渲染——表面看着正常，实则功能缺失且浪费资源。
- 全局注册名统一用短横线格式：
app.component('base-button', BaseButton) - 模板中必须写
<base-button>，而非<BaseButton>或<baseButton> - 开启 Vue 的
compilerOptions.isCustomElement（如需兼容 Web Components），避免误判
