使用 clean-css

CSS 压缩方案

在线压缩工具

• 百度官方没有公开的CSS在线压缩工具
• 但百度开发者常用以下方案：

主流压缩工具

cleancss -o style.min.css style.css
# 使用 CSSNano
npm install cssnano -g
cssnano style.css style.min.css

Webpack 配置

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

JavaScript 压缩方案

常用压缩工具

# 使用 Terser（推荐，ES6+支持好）
npm install terser -g
terser input.js -o output.min.js -c -m
# 使用 UglifyJS（较老）
npm install uglify-js -g
uglifyjs input.js -o output.min.js -c -m

Webpack 配置

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

百度实际工程实践

百度 FIS 构建工具

# FIS3 配置示例
fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});
fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

Vue/React 项目

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,  // 移除console
        drop_debugger: true  // 移除debugger
      }
    }
  }
});

高级优化建议

Gzip/Brotli 压缩

# Nginx配置
gzip on;
gzip_types text/css application/javascript;
gzip_min_length 1024;

图片和字体压缩

# 图片优化
npm install imagemin imagemin-webp -D
# 字体子集化
npm install fontmin -D

CDN 配置优化

• 百度云 CDN 自动压缩
• 配置缓存策略
• 启用 HTTP/2

最佳实践

开发建议

1. 开发阶段：保留完整源代码，便于调试
2. 测试阶段：启用Source Map调试压缩代码
3. 生产环境：启用完整压缩，移除注释和调试代码

自动化方案

// package.json
{
  "scripts": {
    "build": "npm run build:css && npm run build:js",
    "build:css": "cleancss -o dist/style.min.css src/style.css",
    "build:js": "terser src/main.js -o dist/main.min.js -c -m"
  }
}

注意事项

1. 保留必要的 License 注释
2. 注意兼容性：压缩可能影响某些边缘情况
3. 测试验证：压缩后务必进行功能测试
4. 监控性能：使用 Lighthouse 等工具评估优化效果

这些是百度及行业内主流的前端资源压缩方案,具体实现可根据项目需求调整。

标签： CSS压缩 代码优化