核心思路是减少模板编译生成的冗余代码，让最终渲染函数更精简：①用v-pre跳过静态内容编译；②用v-once锁定一次性渲染；③改用运行时构建+render函数；④提取静态结构为独立组件或片段。
核心思路是减少模板编译生成的冗余代码，让最终渲染函数更精简。Vue 的编译器会把模板转成 JavaScript 渲染函数，而这些函数的体积直接受模板写法和配置影响。
用 v-pre 跳过静态内容编译
纯文本、说明性内容不需要响应式绑定或指令解析，加 v-pre 后，Vue 完全不处理它，也不生成任何运行时逻辑。
- 适用于版权信息、文档片段、固定提示语等
- 避免了 AST 解析、指令提取、依赖收集等整套编译流程
- 比手动写 render 函数更轻量，且保持模板可读性
用 v-once 锁定一次性渲染
数据不会变的内容（如首次欢迎语、协议条款、页面标题），用 v-once 可让编译器生成静态渲染函数，后续更新完全跳过该节点。
- 不监听响应式变化，不触发 patch 过程
- 适合与用户状态无关但需动态插入初始值的场景
- 注意：不要用于可能变更的变量，否则更新将失效
改用运行时构建 + render 函数
默认 Vue 包含模板编译器（vue.common.js），体积大；切换为仅含运行时的版本（vue.runtime.common.js），并把 template 全部转为 render 函数，能直接省掉整个编译模块。
立即学习“前端免费学习笔记（深入）”；
- Webpack 配置别名：
'vue$': 'vue/dist/vue.runtime.esm-bundler.js' - 根实例改写：
render: h => h(App)，移除template选项 - 需配合构建工具（如 vite 或 vue-cli）预编译 SFC 中的 template，确保无运行时编译
提取静态结构为独立组件或片段
重复出现的静态 HTML（如页头、页脚、图标 SVG）抽成单独组件或使用 <template> 片段，Vue 编译器会识别为静态节点并复用渲染函数。
- 避免在多个地方重复生成相同结构的渲染代码
- 比内联写法更利于 tree-shaking 和缓存命中
- 结合
defineComponent显式声明，帮助类型系统和打包器更好优化
