CSS-in-JS 的核心逻辑
开发者编写 CSS-in-JS → Webpack + Babel 编译 → 生成 JS/CSS 文件 → 浏览器加载 JS → 运行时注入样式 → 组件渲染
核心功能由浏览器完成
- 动态样式生成：
组件渲染时，根据当前 props（如主题、状态等）动态计算样式值（例如 ${props => props.color}），生成最终 CSS。 - 样式注入：
将 CSS 动态插入到页面的 style 标签中（首次渲染或 props 变化时触发） - 哈希类名生成
2. Webpack 的编译流程
-
入口 ： src/index.js
-
模块构建：分析 import/require 语句，构建依赖
-
babel转译：CSS-in-JS 代码通常由 Babel 插件处理
-
chunk 分割 优化
SplitChunksPlugin，
MiniCssExtractPlugin：将编译后的 CSS 提取为独立文件（若 CSS-in-JS 库支持静态提取）。 -
输出（Output）：dist/
静态提取
是一种在构建阶段（如 Webpack、Vite 打包）将 CSS 样式提前提取为独立静态文件（如 .css）的技术。目标是 减少浏览器运行时的计算开销
