合并CSS后体积反而更大，是因为简单拼接无法识别跨文件重复选择器、冗余@import及未用样式；需用PostCSS+postcss-import+cssnano在构建中全局分析并去重压缩。
为什么合并 CSS 文件后体积反而更大了
直接把多个 .css 文件用 cat 或复制粘贴合并，再丢给压缩工具（比如 cssnano），常发现最终体积比原来总和还大。核心原因是：不同文件里的重复选择器、重叠声明、未使用的 @import 和跨文件冗余规则没被识别。工具只做局部压缩，不跨文件去重。
- 多个文件中都写了
.btn { padding: 8px 12px; }，合并后变成两条一模一样的规则 - 一个文件里
@import 'reset.css';，另一个又写了完整重置样式，实际生效的只有一份，但两份都进了最终文件 - 构建时未剔除开发环境专用的
debug-*类或 CSS-in-JS 注入的临时样式
用 PostCSS + cssnano 做真正有效的合并压缩
关键不是“先合并再压缩”，而是“在构建流程中让压缩器看到全部源码上下文”。PostCSS 的 postcss-import 插件会在压缩前把所有 @import 内联展开，cssnano 才能跨文件做去重、合并声明、删除空规则等操作。
npm install --save-dev postcss postcss-import cssnano postcss-cli
配置 postcss.config.js：
module.exports = {
plugins: [
require('postcss-import'),
require('cssnano')({
preset: ['default', {
discardComments: { removeAll: true },
mergeLonghand: true,
collapseWhitespace: true
}]
})
]
}
入口文件 index.css 写成：
立即学习“前端免费学习笔记（深入）”；
@import './base/reset.css'; @import './components/button.css'; @import './layout/grid.css';
执行命令生成最终文件：
npx postcss index.css -o bundle.min.css
link 引入前必须检查 HTTP 缓存与更新失效问题
合并压缩后文件名不变（比如还是 style.css），浏览器会沿用旧缓存，导致用户看不到新样式。不能只靠清缓存或硬刷新解决。
- 构建时用内容哈希重命名，例如
style.a1b2c3d4.css，通过构建插件（如 Webpack 的MiniCssExtractPlugin）或脚本自动生成 - HTML 中的
必须同步替换成带哈希的路径，手动改容易漏，建议用模板变量或构建时注入 - 若无法改 HTML（如 CMS 系统），可在服务器层加响应头：
Cache-Control: public, max-age=31536000, immutable，并确保每次变更都换文件名
哪些 CSS 实际不该进主包
合并压缩不是万能解药。有些样式逻辑上就不该和主样式一起加载，强行合并反而拖慢首屏。
- 页面级独有样式（如
/article/xxx页的排版类）——应按路由异步加载，或用media属性延迟加载： - 主题色变量、暗黑模式切换样式 —— 用
:rootCSS 自定义属性 + JS 切换，避免打包多套完整规则 - 第三方 UI 库（如 Ant Design）的全量 CSS —— 改用按需引入（
babel-plugin-import）或提取其用到的最小样式片段
真正难处理的是那些散落在 HTML 标签里、JS 动态插入的、或者由服务端模板拼出来的样式 —— 它们不在构建流程里，合并压缩工具根本看不见。这类得从源头规范写法，或用运行时收集+预渲染补全。
