动态组件和异步组件是vue性能优化的关键：前者通过按需切换组件，后者通过defineasynccomponent或() => import()延迟加载。配合可缓存状态，叠加统一处理异步状态，显著降低包体积与首屏时间。

动态组件和异步组件是 Vue 应用性能优化的两个关键手段：前者解决“什么时候渲染哪个组件”，后者解决“要不要现在加载这个组件”。合理搭配使用，既能保持交互流畅，又能控制包体积和首屏时间。

动态组件：按需切换，避免冗余分支

用 <component :is="xxx"></component> 替代一堆 v-if/v-else，让模板更简洁、逻辑更集中。它不预加载任何组件，只在绑定值变化时销毁旧实例、挂载新实例。

• 支持三种绑定方式：组件对象（推荐，尤其 setup 中）、注册的组件名（需全局/局部注册）、异步组件函数
• 默认每次切换都会重新初始化——输入框清空、滚动位置重置、请求重发
• 若需保留状态（比如 Tab 页签里的表单或列表位置），必须用 <keepalive></keepalive> 包裹
• <keepalive></keepalive> 要求组件有明确的 name（显式声明或文件名推导），否则缓存无效

异步组件：延迟加载，减小初始体积

把大组件拆成独立 chunk，等真正要用时才发起请求。Webpack/Vite 会自动做代码分割，打包后生成单独的 JS 文件。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

• 基础写法：defineAsyncComponent(() => import('./MyModal.vue'))（Vue 3）或直接 () => import('./...')（Vue 2.6+ / Vue 3）
• 带加载态的高级写法：返回一个配置对象，可指定 loading 组件、错误组件、延迟显示时间和超时阈值
• 异步组件本身会被缓存——首次加载成功后，后续切换直接复用，不会重复请求
• 配合路由使用最常见：{ path: '/admin', component: () => import('@/views/Admin.vue') }

组合策略：动态 + 异步 + 缓存

三者叠加才是生产环境的典型模式。例如多标签页系统：每个 tab 对应一个异步加载的组件，切换时用 <component :is></component> 渲染，再用 <keepalive></keepalive> 防止反复初始化。

• Tab 切换时，<keepalive></keepalive> 缓存的是异步组件的已加载实例，不是源码 chunk
• 可配合 include 或 exclude 属性精准控制哪些组件需要缓存
• 异步加载失败时，错误组件会替代目标组件渲染；超时未响应则触发 error 回退
• 注意：<suspense></suspense>（Vue 3）可统一处理异步依赖的 loading/error 状态，比单个组件配置更简洁

实际优化效果参考

在中大型项目中，合理应用这两类组件通常能带来明显收益：

• 首屏 JS 包体积下降 30%～50%，从 1.8MB 降到 1.1MB 左右
• 首屏加载时间缩短约 40%～60%，尤其对网络较慢的用户更明显
• Tab 切换卡顿消失，表单数据、分页状态、滚动位置自然保留
• 内存占用更可控——未激活的异步组件不执行 setup，也不创建实例

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！