@import 不会直接拖慢首屏但默认阻塞串行加载，实际性能更差；PostCSS + postcss-import 是最稳妥的静态切分方式；真按需加载需 JS 动态导入+样式注入；CSS Modules 仅解决作用域而非物理分离。
用 @import 按组件拆分 CSS 会拖慢首屏？
不会直接拖慢，但默认是阻塞、串行加载，实际效果比你想的更糟。浏览器遇到 @import 会暂停当前样式表解析，发起新请求，等它下载完才继续——哪怕你写在文件末尾，它也会把整个链路卡住。
- 只在 CSS 文件顶部用，避免嵌套
@import（比如 A.css 导入 B.css，B.css 又导入 C.css） - 现代项目别用它做组件切分，
@import是为兼容老浏览器留的后门，不是模块化方案 - 如果非要用（比如维护遗留系统），确保被导入的文件体积小、无外部依赖，且已走 CDN 缓存
PostCSS + postcss-import 怎么安全切分？
这才是目前最稳妥的静态切分方式：编译期合并，运行时零额外请求。它把 @import 提前展开成内联内容，最终输出一个扁平 CSS 文件。
- 安装：
npm install postcss postcss-import --save-dev - 配置
postcss.config.js，必须把postcss-import放在其他插件（如autoprefixer）之前 - 组件文件命名建议带下划线前缀，如
_button.css，避免被 Webpack/Vite 当作入口误打包 - 路径解析基于
from参数或root配置，别依赖相对位置“猜”，否则重命名父文件就报Failed to find '~/_button.css'
Vite / Webpack 中怎么让每个组件 CSS 独立加载？
真要按需加载组件样式，得靠 JS 动态导入 + 样式注入，不是纯 CSS 切分。CSS 本身没有“懒加载”能力，所谓“独立”是指 JS 控制它的加载时机。
- Vite 里写
import('./components/Button.css')，配合build.rollupOptions.output.manualChunks控制打包粒度 - Webpack 需启用
css-loader的esModule: true，再用import('./Button.module.css')触发代码分割 - 注意：普通
.css文件动态 import 后，样式会插入<head>，但没卸载机制；改用useStyles类 Hook 才能配合组件生命周期 - 服务端渲染（SSR）场景下，动态 CSS 可能导致 FOUC 或水合不匹配，得用
collectStyles提前提取
为什么不能直接用 CSS Modules 命名切分？
CSS Modules 解决的是作用域问题，不是组织结构问题。它把类名哈希化，但所有样式仍被打包进同一个 CSS bundle，没减少初始体积，也没实现物理分离。
立即学习“前端免费学习笔记（深入）”；
-
Button.module.css和Modal.module.css编译后还是塞进index.css里，只是类名变成Button_button__xyz - 如果你的目标是“某个页面不用 Button 就不加载 Button 样式”，Modules 本身做不到，得配合动态 import 或构建时条件剔除
- 多人协作时容易误用：有人在
Button.module.css里写全局重置（如body { margin: 0 }），结果被其他组件意外引入
transition: all 0.2s 和永远删不干净的 div[data-v-xxx]。 
