@intervolga/optimize-cssnano-plugin

optimize-cssnano-plugin

It will search for CSS assets during the Webpack build and minimize it with cssnano. Solves extract-text-webpack-plugin CSS duplication problem.

Just like optimize-css-assets-webpack-plugin but more accurate with source maps.

Installation:

Using npm:

$ npm install --save-dev @intervolga/optimize-cssnano-plugin

Configuration:

const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
module.exports = {
	module: {
		loaders: [
			{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
		]
	},
	plugins: [
    new ExtractTextPlugin("styles.css"),

    new OptimizeCssnanoPlugin({
      sourceMap: nextSourceMap,
      cssnanoOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true,
          },
        }],
      },
    }),
	]
}

Similar packages

Other packages similar to @intervolga/optimize-cssnano-plugin

css-minimizer-webpack-plugin

css-minimizer-webpack-plugin is another popular plugin for optimizing and minimizing CSS assets in a webpack build. It uses cssnano under the hood but provides a more modern and flexible API compared to @intervolga/optimize-cssnano-plugin. It also supports parallel processing to speed up the build process.

mini-css-extract-plugin

mini-css-extract-plugin extracts CSS into separate files, creating a CSS file per JS file which contains CSS. It is often used in combination with cssnano for CSS optimization. While it focuses more on extracting CSS, it can be used alongside other plugins for optimization purposes.