1. optimize-css-assets-webpack-plugin
A Webpack plugin to optimize \ minimize CSS assets.
optimize-css-assets-webpack-plugin
Package: optimize-css-assets-webpack-plugin
Created by: NMFR
Last modified: Fri, 21 Jul 2023 15:52:47 GMT
Version: 6.0.1
License: MIT
Downloads: 9,709,607
Repository: https://github.com/NMFR/optimize-css-assets-webpack-plugin

Install

npm install optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin

Optimize CSS Assets Webpack Plugin

A Webpack plugin to optimize \ minimize CSS assets.

:warning: For webpack v5 or above please use css-minimizer-webpack-plugin instead.

What does the plugin do?

It will search for CSS assets during the Webpack build and will optimize \ minimize the CSS (by default it uses cssnano but a custom CSS processor can be specified).

Solves extract-text-webpack-plugin CSS duplication problem:

Since extract-text-webpack-plugin only bundles (merges) text chunks, if it's used to bundle CSS, the bundle might have duplicate entries (chunks can be duplicate free but when merged, duplicate CSS can be created).

Installation:

Using npm:

 $ npm install --save-dev optimize-css-assets-webpack-plugin

:warning: For webpack v3 or below please use [email protected]. The [email protected] version and above supports webpack v4.

Configuration:

The plugin can receive the following options (all of them are optional):

  • assetNameRegExp: A regular expression that indicates the names of the assets that should be optimized \ minimized. The regular expression provided is run against the filenames of the files exported by the ExtractTextPlugin instances in your configuration, not the filenames of your source CSS files. Defaults to /\.css$/g
  • cssProcessor: The CSS processor used to optimize \ minimize the CSS, defaults to cssnano. This should be a function that follows cssnano.process interface (receives a CSS and options parameters and returns a Promise).
  • cssProcessorOptions: The options passed to the cssProcessor, defaults to {}
  • cssProcessorPluginOptions: The plugin options passed to the cssProcessor, defaults to {}
  • canPrint: A boolean indicating if the plugin can print messages to the console, defaults to true

Example:

 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
  ]
};

License

MIT (http://www.opensource.org/licenses/mit-license.php)

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin