vanilla-extract能显著减小js包体积，因其采用零运行时架构：样式逻辑在构建期通过插件编译为静态css，仅导出轻量类名变量，js包中不包含任何样式计算、插入或更新逻辑，典型项目减少15–30% js体积。
CSS-in-JS 框架本身不是体积问题的根源，但 styled-components、emotion 等默认打包行为会把运行时 + 样式解析逻辑 + 生成逻辑全打进 JS 包，动辄 15–30KB（gzip 后），且 Tree Shaking 效果差——Vanilla-extract 是少数能真正“编译期提取 CSS”的替代方案。
为什么 Vanilla-extract 能显著减小 JS 包体积
它不把样式逻辑留在运行时，而是借助 TypeScript 编译插件（@vanilla-extract/esbuild-plugin 或 @vanilla-extract/webpack-plugin）在构建阶段就把样式转成静态 CSS 文件，并导出极轻量的 class 名变量（如 const className = 'src_button__abc123'）。JS 包里不再含任何样式计算、插入、更新逻辑。
- JS 部分只剩 class 名映射和少量工具函数，gzip 后通常
- CSS 单独输出，可被 HTTP 缓存、CDN 分发、预加载，且支持 PurgeCSS 类工具清理未用类
- 无运行时开销：不监听 props 变化、不 patch
style标签、不维护样式注册表 - 类型安全：class 名是 TS 字符串字面量，拼错直接报错，不会漏删或误删
迁移时必须处理的三个关键点
Vanilla-extract 不是“换个 import 就行”的平替，它强制样式与组件分离，且依赖构建时编译。常见卡点：
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
createTheme和globalStyle必须写在.css.ts文件中，不能放在 React 组件文件里；否则插件无法扫描到，构建时报VanillaExtract: No styles found - 动态样式（如根据
theme或props切换）需用recipe+variants声明，不能写css({ color: props.primary ? 'blue' : 'gray' })这类运行时表达式 - SSR 场景下必须调用
getStylesheet或extractCss提取关键 CSS，否则首屏无样式；Vite 用户需配合vite-plugin-vanilla-extract，而非仅靠cssModules配置
对比 styled-components/emotion 的实际体积变化
以一个中等规模管理后台为例（含主题切换、暗色模式、按钮/表格/表单组件）：
- 原
styled-components@6：JS 包含运行时 + 所有组件样式定义，gzip 后 28KB - 改用
vanilla-extract@2+@vanilla-extract/css：JS 部分降至 0.9KB，CSS 单独 14KB（可进一步压缩 + 分片） - 注意：若项目已重度依赖
styled.div的链式写法或asChild等高级能力，直接迁移成本高；建议优先从新模块或原子组件（Button、Input）开始试点
Vanilla-extract 的硬约束很明确：它只接受“编译期可静态分析”的样式逻辑。一旦你写了 css({ fontSize: `${size}px` }) 或基于用户输入动态生成规则，就得退回到 runtime CSS-in-JS 方案——这时候与其强行适配，不如用 goober（css-render（支持浏览器端动态生成）补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
