css-in-js

CSS-in-JS 的核心逻辑

开发者编写 CSS-in-JS → Webpack + Babel 编译 → 生成 JS/CSS 文件 → 浏览器加载 JS → 运行时注入样式 → 组件渲染

核心功能由浏览器完成

• 动态样式生成：
  组件渲染时，根据当前 props（如主题、状态等）动态计算样式值（例如 ${props => props.color}），生成最终 CSS。
• ​样式注入：
  将 CSS 动态插入到页面的 style 标签中（首次渲染或 props 变化时触发）
• 哈希类名生成

2. Webpack 的编译流程

1. 入口 ： src/index.js

2. 模块构建：分析 import/require 语句，构建依赖

3. babel转译：CSS-in-JS 代码通常由 Babel 插件处理
   

4. chunk 分割 优化
   SplitChunksPlugin，
   MiniCssExtractPlugin：将编译后的 CSS 提取为独立文件（若 CSS-in-JS 库支持静态提取）。

5. 输出（Output）​：dist/

---

静态提取

是一种在构建阶段（如 Webpack、Vite 打包）将 CSS 样式提前提取为独立静态文件（如 .css）的技术。目标是 ​减少浏览器运行时的计算开销