compression-webpack-plugin

What is compression-webpack-plugin?

The compression-webpack-plugin is a plugin for Webpack that allows you to compress assets with various compression algorithms before they are output to the file system. This can help reduce the size of your assets, leading to faster load times for your web application.

What are compression-webpack-plugin's main functionalities?

Compression of assets

This feature allows you to compress files using gzip. The 'test' option is a RegExp that matches the files to compress.

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js(\?.*)?$/i,
    }),
  ],
};

Custom compression options

This feature allows you to use different compression algorithms like Brotli, and set custom compression options such as the compression level.

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      test: /\.js(\?.*)?$/i,
      compressionOptions: { level: 11 },
    }),
  ],
};

Asset filtering

This feature allows you to exclude certain assets from being compressed by using the 'exclude' option.

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
      exclude: /node_modules/,
    }),
  ],
};

Threshold and minRatio settings

This feature allows you to only compress assets that are larger than a certain size (threshold) and only if the compression ratio is below a certain value (minRatio).

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
      threshold: 10240,
      minRatio: 0.8
    }),
  ],
};

Other packages similar to compression-webpack-plugin

brotli-webpack-plugin

This package is similar to compression-webpack-plugin but is specifically focused on using the Brotli compression algorithm. It may offer more advanced Brotli-specific options.

zopfli-webpack-plugin

Similar to compression-webpack-plugin, this plugin uses the Zopfli algorithm for compression, which can result in smaller file sizes but may take longer to compress.

uglifyjs-webpack-plugin

While not a direct alternative, uglifyjs-webpack-plugin can reduce the size of JavaScript files by minifying them, which is a different approach to optimization compared to compression.

README

Compression Plugin

Prepare compressed versions of assets to serve them with Content-Encoding

Install

npm i -D compression-webpack-plugin

Usage

webpack.config.js

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  plugins: [
    new CompressionPlugin(...options)
  ]
}

Options

Name	Type	Default	Description
test	{RegExp|Array<RegExp>}	.	All assets matching this {RegExp|Array<RegExp>} are processed
include	{RegExp|Array<RegExp>}	undefined	Files to include
exclude	{RegExp|Array<RegExp>}	undefined	Files to exclude
cache	{Boolean|String}	false	Enable file caching
asset	{String}	[path].gz[query]	The target asset name. [file] is replaced with the original asset. [path] is replaced with the path of the original asset and [query] with the query
filename	{Function}	false	A {Function} (asset) => asset which receives the asset name (after processing asset option) and returns the new asset name
algorithm	{String|Function}	gzip	Can be (buffer, cb) => cb(buffer) or if a {String} is used the algorithm is taken from zlib
threshold	{Number}	0	Only assets bigger than this size are processed. In bytes.
minRatio	{Number}	0.8	Only assets that compress better than this ratio are processed
deleteOriginalAssets	{Boolean}	false	Whether to delete the original assets or not

test

webpack.config.js

[
  new CompressionPlugin({
    test: /\.js/
  })
]

include

webpack.config.js

[
  new CompressionPlugin({
    include: /\/includes/
  })
]

exclude

webpack.config.js

[
  new CompressionPlugin({
    exclude: /\/excludes/
  })
]

cache

webpack.config.js

[
  new CompressionPlugin({
    cache: true
  })
]

asset

webpack.config.js

[
  new CompressionPlugin({
    asset: '[path].gz[query]'
  })
]

filename

webpack.config.js

[
  new CompressionPlugin({
    filename (asset) {
      asset = 'rename'
      return asset
    }
  })
]

algorithm

webpack.config.js

[
  new CompressionPlugin({
    algorithm: 'gzip'
  })
]

threshold

webpack.config.js

[
  new CompressionPlugin({
    threshold: 0
  })
]

minRatio

webpack.config.js

[
  new CompressionPlugin({
    minRatio: 0.8
  })
]

deleteOriginalAssets

webpack.config.js

[
  new CompressionPlugin({
    deleteOriginalAssets: true
  })
]

Maintainers

Joshua Wiens

Juho Vepsäläinen

Michael Ciniawsky

Alexander Krasnoyarov