使用PostCSS搭配cssnano插件可高效安全压缩CSS，支持移除空格注释、合并声明、降级calc等；需安装postcss、cssnano及postcss-cli，配置postcss.config.js启用cssnano，并注意媒体查询合并与高风险选项慎用。
使用 PostCSS 压缩 CSS 是当前主流且高效的方式，核心在于搭配 cssnano 插件，它能安全地移除空格、注释、冗余规则，并支持高级优化（如合并重复声明、降级 calc 表达式等）。
安装必要依赖
在项目中安装 PostCSS 及压缩插件：
- npm install postcss cssnano postcss-cli --save-dev
- 若已用 Webpack/Vite 等构建工具，可改用对应 loader（如
postcss-loader），无需单独调用 CLI
配置 postcss.config.js
在项目根目录创建 postcss.config.js，启用 cssnano：
module.exports = {
plugins: [
require('cssnano')({
preset: ['default', {
discardComments: { removeAll: true }, // 彻底删除注释
normalizeWhitespace: true, // 压缩空格与换行
reduceTransforms: true, // 简化 transform 值
}]
})
]
}
注意：cssnano 默认启用大量安全优化；preset: 'advanced' 可进一步激进压缩（慎用，可能影响兼容性）
立即学习“前端免费学习笔记（深入）”；
通过命令行或构建流程执行压缩
直接压缩单个文件：
- npx postcss src/style.css -o dist/style.min.css
配合构建工具时（如 Webpack）：
- 在
module.rules中为.css文件添加postcss-loader - 确保
cssnano仅在生产环境启用（开发时禁用以保留可读性）
避免常见压缩陷阱
cssnano 默认行为通常很安全，但需留意：
- 自定义属性（CSS 变量）不会被重命名，无需额外配置
- 媒体查询合并（
mergeMediaQueries）默认开启，可能改变断点顺序——若布局异常，可在 cssnano 配置中关闭 - 慎用
zindex或uniqueSelectors等高风险选项，除非明确需要
