VNode属性过多间接增大打包体积，因其阻碍Tree Shaking、增加运行时对象体积、导致patchFlag失效；需精简attrs、避免闭包捕获、优化模板表达式并提取计算属性。
VNode 属性过多本身不直接增大打包体积，但它会间接推高最终产物大小——根本原因在于冗余属性会阻碍 Tree Shaking、增加运行时生成的 VNode 对象体积、并导致编译器无法准确标记 patchFlag，从而让构建工具保留更多未优化代码和运行时逻辑。
冗余 props/attrs 阻断 Tree Shaking
当父组件用 v-bind="obj" 或传递大量未声明的属性时，Vue 会把它们塞进 attrs 字段。这些字段若包含函数、大型对象或闭包引用，会使整个 VNode 实例无法被轻量回收；更关键的是，构建工具在静态分析时无法判定哪些属性真正被消费，被迫保留相关处理逻辑（如 attrs 合并、事件代理、class/style 解析等），导致 runtime 中未使用的代码无法被摇掉。
- 子组件显式声明所有接收的 prop，避免未定义属性落入 attrs
- 设置
inheritAttrs: false，主动切断不需要的 attrs 向根节点挂载 - 禁用
v-bind="obj"，改用v-bind:key="obj.key" v-bind:value="obj.value"显式展开
render 函数闭包捕获放大内存与体积开销
手写 render() 时若引用了外部变量（比如闭包里存了整个 data 或某个大数组），VNode 就会持有该闭包引用链。这不仅拖慢 GC，还会让构建工具误判“该模块被动态使用”，不敢删除看似无关但实际被闭包隐式依赖的函数或工具方法，变相保留更多 runtime 代码。
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
- render 内只访问
this.xxx上的响应式属性或computed，不捕获局部变量或父作用域对象 - 回调统一通过
setup()返回的方法注入，而非在 render 中定义匿名函数 - 列表项务必使用稳定、唯一的
key，防止旧 VNode 因复用失败而长期驻留
patchFlag 失效引发全量 diff 与额外代码保留
Vue 3 编译器靠 patchFlag 标记动态内容类型，以便跳过静态子树比对。但模板中大量“伪动态”表达式（如 {{ item.id || '' }}、:class="[a, b]"）会让编译器无法静态判定，只能打上 PATCH_NORMAL。这不仅增加运行时 diff 开销，还迫使 runtime 保留完整的通用 patch 流程逻辑——这部分代码本可在静态场景下被 Tree Shaking 移除。
- 避免无意义的空值兜底（如
{{ val || '' }}改为{{ val }}，配合 CSS 空态处理） - 静态 class/style 尽量写死，动态部分用
:class="{ active: isActive }"这类明确结构 - 复杂条件逻辑抽到计算属性，保持模板表达式简单可推导
精简模板结构的实操建议
模板不是越“简洁”越好，而是越“可静态分析”越好。一个 v-if 套三层三元表达式，看着短，却让编译器放弃优化；而拆成带命名的计算属性 + 干净插值，反而更利于体积压缩。
- 用
<template v-for></template>替代嵌套v-for指令，减少 VNode 层级深度 - 非必要不使用
<component :is="xxx"></component>，动态组件会禁用大部分静态优化 - 提取重复结构为独立组件，让每个 VNode 更专注、更小、更易被单独摇掉
- 开启
build.rollupOptions.treeshake: true（Vite 默认开启），配合defineConfig({ build: { minify: 'terser' } })确保压缩生效
