Optimize CSS Classnames

Webpack plugin: Optimize css class names:

Minimize CSS class names and give minimization up to 70% for css files and ~10% for html template minimization.

Minification principle:

FROM :

  <div class="long-class-name"></div>

  .long-class-name {
  }

TO :

  <div class="a"></div>

  .a {
  }

The plugin work together with other loaders:

• optimize-css-classnames-html
• optimize-css-classnames-angularjs

Webpack configuration example (for Jquery):

const OptimizeCSSClassnamesPlugin = require('optimize-css-classnames-plugin');

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
       },
       {
            test: /\.(html)$/,
            use: [{
                loader: 'html-loader'
            }, {
                loader: 'optimize-css-classnames-html'
            }]
       }]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new OptimizeCSSClassnamesPlugin({
            prefix: '_',
            ignore: [
              'blink-class',
              /^e2e-/
            ]
        })
    ]
}

Configuratiob Examples:

• Jquery
• Angular 1.5