模板编译阶段即可按需注入样式，核心是编译器识别组件css依赖并生成scopeid与静态class标记，再配合构建工具提取、作用域绑定及运行时动态加载。

模板编译阶段就能把样式按需注入，关键不是靠运行时挂载，而是让编译器识别哪些组件真正用到了某段 CSS，并只在对应 VNode 的 scopeId 或 class 属性中生成标记，再配合构建工具提取、作用域绑定与条件注入。

编译期识别样式依赖，生成 scopeId 与静态 class 标记

Vue 模板编译器（如 @vue/compiler-dom）在解析 `

• VNode.props.class = "btn" → 被重写为 "btn" + " data-v-f3f5eb58"
• 若使用 `:class="{ active: isActive }"`，编译器会保留响应式逻辑，但静态部分仍自动拼接 scopeId
• 未声明 scope 的全局样式（如 `

通过自定义编译插件提取组件级样式块

要实现“全局样式按需注入”，本质是把原本全量打包的 CSS 拆解为组件粒度，并在编译时建立样式与 VNode 的映射关系。可行路径包括：

Rydberg Agent Node

使用一条命令部署ProbeChain Rydberg测试网代理节点。自动注册为Agent(NodeType=1)，免gas，支持macOS/Linux/Windows。触发词：/r

下载

• 在 vite-plugin-vue 插件中拦截 `transform` 阶段，扫描模板中出现的 class 名（如 `.card`, `.list-item`），反向查找项目中对应的 `
• 将匹配到的样式规则打上组件 ID 标签，并写入 VNode 的自定义属性（如 `__cssModule: ['card', 'list-item']`）
• 构建时收集所有 VNode 的 `__cssModule`，合并去重，生成最小 CSS chunk，供 runtime 动态加载

运行时根据 VNode 属性动态加载并注入样式

VNode 本身不执行注入，但它携带了决策依据。可在组件挂载前（如 `onBeforeMount`）读取当前 VNode 树中的样式标识，触发加载：

• 遍历当前组件的根 VNode 及子节点，收集 `props['data-css']` 或自定义 `__requiredCss` 字段
• 调用 `import('./styles/card.css')` 动态引入，CSS 内容通过 `document.head.appendChild(styleEl)` 注入
• 避免重复注入：用 Set 缓存已加载的样式模块名，VNode 更新时不重复触发

配合 patchFlag 提升样式 diff 效率

如果某段样式只影响 class，而 class 值是纯静态的（如 `

`），编译器会打上 `PatchFlags.CLASS` 标志。这样在 patchProps 处理属性更新时，可跳过对 style、id 等无关字段的比对，仅聚焦 class 字段是否变化——既减少运行时开销，也间接保障了“按需”逻辑的轻量性。