Babel 通过 babel-plugin-jsx 替代默认 JSX 插件、启用 Fragment 零成本语法、关闭冗余辅助注入、结合 enum-to-object 消除副作用，显著减小产物体积并提升 Tree Shaking 效果。
Babel 通过插件优化 JSX 转换，核心是减少冗余代码、避免副作用、提升 Tree Shaking 效果，最终让产物体积更小、运行更轻量。
用 babel-plugin-jsx 替代默认 JSX 转换
Vue 3 官方的 babel-plugin-jsx 比 Babel 默认的 @babel/plugin-transform-react-jsx 更精简。它不生成多余包装节点，也不引入 runtime 辅助函数（如 jsx 或 jsxs 函数调用），尤其适合无 React 运行时的环境。
- 默认 React JSX 插件会注入
jsx()调用，每个 JSX 元素都对应一次函数调用，增加体积和执行开销 - babel-plugin-jsx 可直接编译为原生 VNode 创建调用（如
h('div', ...)），或支持 Fragment 编译为数组，无需额外 wrapper 元素 - 配合
resolveType: true选项，还能在编译期推导组件类型，避免运行时解析
启用 Fragment 零成本语法
使用 <>...</> 或显式 <Fragment> 代替无意义的 <div> 包裹，能直接减少 DOM 节点数和 JS 渲染逻辑。
- 编译后不会生成任何新对象或函数调用，只是将子节点扁平展开为数组
- 在条件渲染、列表循环中特别有效，例如：
{items.map(i => (<><Item/><Separator/></>))}不会多出一层父节点 - 相比手动写
h(Fragment, [...])，语法更简洁，AST 层面也更易做静态优化
关闭不必要的 JSX 辅助与运行时注入
Babel 默认会在每个含 JSX 的文件里注入辅助代码（如 jsx、jsxs、Fragment 引用），造成重复打包。
立即学习“Java免费学习笔记（深入）”；
- 配置
@babel/plugin-transform-runtime并设runtimeHelpers: true，把 JSX 辅助统一抽到@babel/runtime中，避免重复引入 - 在
.babelrc中禁用自动注入："runtime": false（若已用 transform-runtime） - 对 Vue 项目，确保不同时启用
@babel/preset-react和babel-plugin-jsx，防止冲突和双重转换
结合 enum-to-object 等插件消除副作用
JSX 经常嵌套在枚举值、配置对象或条件表达式中。若这些上下文本身含 enum，而 enum 编译为 IIFE 就会产生副作用，阻断 Tree Shaking。
- 搭配
babel-plugin-enum-to-object（设reflect: false），把 enum 转为纯常量对象，JSX 中引用的值就变成可摇掉的静态值 - 例如：
<Button type={ButtonTypes.Primary}/>中的ButtonTypes.Primary若是 IIFE 返回值，Tree Shaking 无法识别；转为{Primary: 'primary'}后，未使用的Secondary就能被安全移除 - 这种组合优化对中大型小程序或微前端子应用效果显著，实测单个模块可减 100KB+ 产物
