optimize-css-assets-webpack-plugin
Advanced tools
Package description
The optimize-css-assets-webpack-plugin is a plugin for webpack that applies a chosen CSS optimizer/minifier on the CSS assets created by the CSS extraction plugin (like MiniCssExtractPlugin), optimizing and minimizing CSS files to ensure better load times and performance on the web.
CSS Optimization
This feature allows you to optimize and minimize CSS assets. The code sample shows how to include the OptimizeCSSAssetsPlugin in the webpack configuration to optimize CSS files.
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserJSPlugin({}),
new OptimizeCSSAssetsPlugin({})
]
}
};css-minimizer-webpack-plugin is a plugin that uses cssnano to optimize and minify CSS. It's similar to optimize-css-assets-webpack-plugin but built specifically for webpack 5, whereas optimize-css-assets-webpack-plugin was more commonly used with webpack 4.
clean-css-loader is a webpack loader that minifies CSS using clean-css. It differs from optimize-css-assets-webpack-plugin in that it's implemented as a loader rather than a plugin, which can affect how it's integrated into the webpack build process.
purgecss-webpack-plugin is a plugin that removes unused CSS, which can significantly reduce the size of CSS files. While optimize-css-assets-webpack-plugin focuses on optimizing the CSS that is used, purgecss-webpack-plugin focuses on removing CSS that isn't used at all.
Readme
A Webpack plugin to optimize \ minimize CSS assets.
:warning: For webpack v5 or above please use css-minimizer-webpack-plugin instead.
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).
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).
Using npm:
$ npm install --save-dev optimize-css-assets-webpack-plugin
:warning: For webpack v3 or below please use
optimize-css-assets-webpack-plugin@3.2.0. Theoptimize-css-assets-webpack-plugin@4.0.0version and above supports webpack v4.
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$/gcssProcessor: 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 truevar 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
})
]
};
FAQs
A Webpack plugin to optimize \ minimize CSS assets.
The npm package optimize-css-assets-webpack-plugin receives a total of 1,680,407 weekly downloads. As such, optimize-css-assets-webpack-plugin popularity was classified as popular.
We found that optimize-css-assets-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.