@intervolga/optimize-cssnano-plugin

What is @intervolga/optimize-cssnano-plugin?

@intervolga/optimize-cssnano-plugin is a plugin for optimizing CSS assets using cssnano within a webpack build process. It helps in minimizing CSS files to reduce the overall bundle size, which can improve the performance of web applications.

What are @intervolga/optimize-cssnano-plugin's main functionalities?

Basic CSS Optimization

This feature allows you to optimize and minify CSS files using cssnano. The configuration includes options for source maps and cssnano presets to customize the optimization process.

const OptimizeCSSNanoPlugin = require('@intervolga/optimize-cssnano-plugin');

module.exports = {
  // other webpack configuration
  plugins: [
    new OptimizeCSSNanoPlugin({
      sourceMap: true,
      cssnanoOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true,
          },
        }],
      },
    }),
  ],
};

Custom CSS Optimization

This feature allows for more advanced customization of the CSS optimization process. You can use different cssnano presets and options to fine-tune the minification and optimization according to your needs.

const OptimizeCSSNanoPlugin = require('@intervolga/optimize-cssnano-plugin');

module.exports = {
  // other webpack configuration
  plugins: [
    new OptimizeCSSNanoPlugin({
      cssnanoOptions: {
        preset: ['advanced', {
          discardComments: {
            removeAll: true,
          },
          reduceIdents: false,
        }],
      },
    }),
  ],
};

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.

README

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,
          },
        }],
      },
    }),
	]
}