一些适合在 Heroku 上部署的 CSS 压缩工具

1. Cssnano
   • 特点
     • 高效压缩：Cssnano可以对CSS文件进行多种优化操作，如去除不必要的空白、注释，缩短颜色值（例如将#ffffff转换为#fff），合并相邻的选择器等。这些操作能够显著减小CSS文件的大小，从而提高页面加载速度。
     • 可定制性：它提供了多种预设配置，如default和advanced，可以根据项目需求选择不同的压缩级别。同时，也可以通过自定义配置来精确控制压缩的方式，满足特定的性能和兼容性要求。
     • 与构建工具集成：Cssnano可以很方便地与常见的构建工具集成。例如，在Node.js项目中，可以与postcss集成，在命令行中使用postcss --use cssnano input.css -o output.css来压缩CSS文件。在构建脚本（如package.json中的scripts部分）或者构建工具（如Gulp、Webpack）中也能轻松设置。
   • 在Heroku上的使用示例（与PostCSS集成）
     • 首先在项目中安装postcss和cssnano：npm install postcss postcss - cli cssnano - -save - dev。
     • 在package.json的scripts部分添加一个脚本，如：

     {
       "scripts": {
         "compress - css": "postcss public/css/*.css -o public/css/ - - use cssnano"
       }
     }
     

     • 在Heroku的部署流程（如Procfile中的release阶段或者predeploy脚本）中调用这个脚本即可。
2. Clean - CSS
   • 特点
     • 深度压缩：Clean - CSS能够进行深度的CSS压缩，它可以分析CSS结构并去除冗余的代码，对选择器、属性和值进行优化。例如，它可以识别并删除未使用的CSS规则，这对于清理大型项目中的CSS文件非常有用。
     • 兼容性好：在进行压缩的同时，Clean - CSS会尽量保持CSS的兼容性，支持各种浏览器，包括旧版本的浏览器。这使得它在处理不同类型的项目时都能可靠地工作，不用担心压缩后的CSS在某些浏览器上出现样式问题。
     • 命令行和编程接口：它既提供了简单易用的命令行工具，方便直接对CSS文件进行压缩操作，也提供了编程接口，可以集成到Node.js项目中。例如，可以在Node.js脚本中使用clean - css模块来压缩CSS。
   • 在Heroku上的使用示例（命令行方式）
     • 安装clean - css：npm install clean - css - -save - dev。
     • 在package.json的scripts部分定义压缩脚本，如：

     {
       "scripts": {
         "compress - css": "cleancss - o public/css/compressed.css public/css/input.css"
       }
     }
     

     • 同样，可以在Heroku的部署流程中调用这个脚本。
3. UglifyCSS
   • 特点
     • 基本压缩功能：UglifyCSS主要专注于基本的CSS压缩功能，如去除空白、缩短属性名等。它是一个简单而有效的工具，适合那些对压缩要求不是特别复杂的项目。
     • 轻量级：由于其功能相对简洁，UglifyCSS是一个轻量级的工具，不会给项目增加过多的依赖负担。它可以快速地对CSS文件进行压缩，并且在大多数情况下能够满足基本的性能提升需求。
     • Node.js集成：它是基于Node.js的工具，可以方便地集成到Node.js项目中。可以通过npm install uglifycss - -save - dev安装，然后在Node.js脚本中使用它来压缩CSS文件。
   • 在Heroku上的使用示例（Node.js脚本集成）
     • 安装UglifyCSS后，在一个JavaScript文件（如compress.js）中编写如下代码：

     const fs = require('fs');
     const uglifycss = require('uglifycss');
     
     const inputCSS = fs.readFileSync('public/css/input.css', 'utf8');
     const outputCSS = uglifycss.process(inputCSS);
     
     fs.writeFileSync('public/css/compressed.css', outputCSS);
     

     • 在package.json的scripts部分添加一个脚本："compress - css": "node compress.js"，然后在Heroku部署流程中调用这个脚本。