CSS code compression and Tree Shaking

CSS Code Minification and Tree Shaking

CSS code minification and Tree Shaking are essential techniques for modern front-end performance optimization. By reducing CSS file size and removing unused code, they significantly improve page load speed and runtime efficiency.

Principles of CSS Code Minification

CSS minification is achieved through the following methods:

1. Removing whitespace characters (spaces, line breaks, tabs)
2. Removing comments
3. Shortening color values (e.g., #FFFFFF to #FFF)
4. Merging duplicate rules
5. Optimizing numerical representations (e.g., 0.5px to .5px)

/* Before minification */
.header {
    color: #FFFFFF;
    margin: 10px 20px 10px 20px;
    padding: 0px;
}

/* After minification */
.header{color:#fff;margin:10px 20px;padding:0}

Popular CSS Minification Tools

1. cssnano

cssnano is a PostCSS-based CSS minification tool with multiple optimization options:

const postcss = require('postcss');
const cssnano = require('cssnano');

postcss([cssnano()])
  .process(`
    .test {
      color: #ff0000;
      font-weight: bold;
    }
  `)
  .then(result => {
    console.log(result.css); 
    // Output: .test{color:red;font-weight:700}
  });

2. clean-css

clean-css is another popular CSS minification tool with advanced optimizations:

const CleanCSS = require('clean-css');
const output = new CleanCSS({}).minify(`
  .box { 
    width: 100px;
    height: 100px;
  }
`);
console.log(output.styles); // Output: .box{width:100px;height:100px}

CSS Tree Shaking Technology

Tree Shaking refers to removing unused CSS code through static analysis. Similar to JavaScript Tree Shaking but implemented differently.

How PurgeCSS Works

PurgeCSS is a leading CSS Tree Shaking tool that operates as follows:

1. Analyzes HTML/JSX/Vue template files
2. Extracts all potential selectors
3. Compares CSS rules, keeping matched selectors
4. Removes unused CSS

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html'],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

postcss([purgecss])
  .process(`
    .unused { color: red; }
    .used { color: blue; }
  `)
  .then(result => {
    // Assuming only .used class exists in HTML
    console.log(result.css); // Output: .used{color:blue}
  });

Integration Examples with Build Tools

Webpack Configuration

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ]
};

Vite Configuration

import { defineConfig } from 'vite';
import purgecss from '@fullhuman/postcss-purgecss';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        purgecss({
          content: ['**/*.html', '**/*.vue'],
        })
      ]
    }
  }
});

Advanced Optimization Techniques

1. Critical CSS Extraction

Extracting above-the-fold CSS for better rendering performance:

const Critical = require('critical');

Critical.generate({
  base: 'dist/',
  src: 'index.html',
  target: 'styles/critical.css',
  width: 1300,
  height: 900,
});

2. CSS Modularization and Scoping

Combining CSS Modules for precise Tree Shaking:

// styles.module.css
.unused { color: red; }
.used { color: blue; }

// Component.jsx
import styles from './styles.module.css';

function Component() {
  return <div className={styles.used} />;
}
// Only .used styles will be bundled

3. Dynamic Style Loading

On-demand CSS module loading:

import('./dynamicStyles.css')
  .then(() => console.log('Styles loaded'))
  .catch(err => console.error('Load failed', err));

Performance Comparison Data

Real-world project tests typically show:

Common Issues and Solutions

1. Dynamic Class Names

Issue: JavaScript-generated class names might be incorrectly removed

Solution: Use safelist option

new PurgeCSSPlugin({
  safelist: ['dynamic-class', /^bg-/, 'button-*']
})

2. Preserving Pseudo-classes

Issue: Pseudo-classes like :hover might be incorrectly removed

Solution: Configure preserved pseudo-classes

new PurgeCSSPlugin({
  defaultExtractor: content => {
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
    return broadMatches.concat(innerMatches);
  }
})

3. Third-party Library Styles

Issue: UI library styles might be incorrectly removed

Solution: Handle node_modules separately

new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  safelist: {
    standard: [/^ant-/, /^el-/],
    deep: [/^dark:/]
  }
})

Future Trends

1. Smart CSS Minification: Usage data-based optimization
2. Runtime Tree Shaking: Browser-native CSS module on-demand loading
3. AI-assisted Optimization: Machine learning to predict style usage
4. WASM Acceleration: WebAssembly for faster analysis

// Example of potential future API
const optimizer = new CSSOptimizer();
optimizer.analyzeUsage(userBehaviorData);
const optimizedCSS = await optimizer.process(rawCSS);