css如何压缩打包减小体积_使用postcss进行样式压缩-css教程-PHP中文网

css如何压缩打包减小体积_使用postcss进行样式压缩

P粉602998670

发布： 2025-12-18 11:41:49

原创

968人浏览过

使用PostCSS搭配cssnano插件可高效安全压缩CSS，支持移除空格注释、合并声明、降级calc等；需安装postcss、cssnano及postcss-cli，配置postcss.config.js启用cssnano，并注意媒体查询合并与高风险选项慎用。

css如何压缩打包减小体积_使用postcss进行样式压缩

使用 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' 可进一步激进压缩（慎用，可能影响兼容性）

立即学习“前端免费学习笔记（深入）”；