@amoo-miki/compression-webpack-plugin
v4.0.1-rc.1
Prepare compressed versions of assets to serve them with Content-Encoding
0/weekUpdated 2 years agoMITUnpacked: 28.3 KB
Published by Tobias Koppers @sokra
npm install @amoo-miki/compression-webpack-plugin
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![chat][chat]][chat-url]
[![size][size]][size-url]
compression-webpack-plugin
Prepare compressed versions of assets to serve them with Content-Encoding.
Getting Started
To begin, you'll need to install compression-webpack-plugin:
``console`
$ npm install compression-webpack-plugin --save-dev
Then add the plugin to your webpack config. For example:
webpack.config.js
`js
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [new CompressionPlugin()],
};
`
And run webpack via your preferred method.
Options
| Name | Type | Default | Description |
| :---------------------------------------------: | :---------------------------------------: | :----------------: | :------------------------------------------------------------------------------------------------------------ |
| test | {String\|RegExp\|Array | undefined | Include all assets that pass test assertion |include
| | {String\|RegExp\|Array | undefined | Include all assets matching any of these conditions |exclude
| | {String\|RegExp\|Array | undefined | Exclude all assets matching any of these conditions |algorithm
| | {String\|Function} | gzip | The compression algorithm/function |compressionOptions
| | {Object} | { level: 9 } | Compression options for algorithm |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 (minRatio = Compressed Size / Original Size) |filename
| | {String\|Function} | [path].gz[query] | The target asset filename. |cache
| | {Boolean} | true | Enable file caching |
$3
Type: String|RegExp|Array
Default:
Include all assets that pass test assertion.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
test: /\.js(\?.*)?$/i,
}),
],
};
$3
Type: String|RegExp|Array
Default:
Include all assets matching any of these conditions.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
include: /\/includes/,
}),
],
};
$3
Type: String|RegExp|Array
Default:
Exclude all assets matching any of these conditions.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
exclude: /\/excludes/,
}),
],
};
$3
Type: String|Function
Default:
The compression algorithm/function.
#### String
The algorithm is taken from zlib.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
}),
],
};
#### Function
Allow to specify a custom compression function.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
algorithm(input, compressionOptions, callback) {
return compressionFunction(input, compressionOptions, callback);
},
}),
],
};
$3
Type: Object
Default:
Compression options for algorithm.
If you use custom function for the algorithm option, the default value is {}.
You can find all options here zlib.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
compressionOptions: { level: 1 },
}),
],
};
$3
Type: Number
Default:
Only assets bigger than this size are processed. In bytes.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
threshold: 8192,
}),
],
};
$3
Type: Number
Default:
Only assets that compress better than this ratio are processed (minRatio = Compressed Size / Original Size).image.png
Example: you have file with 1024b size, compressed version of file has 768b size, so minRatio equal 0.75.Compressed Size / Original Size
In other words assets will be processed when the value less minRatio value.1
You can use value to process assets that are smaller than the original. Use a value of Number.MAX_SAFE_INTEGER to process all assets even if they are larger than the original (useful when you are pre-zipping all assets for AWS)
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
minRatio: 0.8,
}),
],
};
$3
Type: String|Function
Default:
The target asset filename.
#### String
[file] is replaced with the original asset filename.[path] is replaced with the path of the original asset.[dir] is replaced with the directory of the original asset.[name] is replaced with the filename of the original asset.[ext] is replaced with the extension of the original asset.[query] is replaced with the query.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
filename: '[path].gz[query]',
}),
],
};
#### Function
webpack.config.js
`js${info.path}.gz${info.query}
module.exports = {
plugins: [
new CompressionPlugin({
filename(info) {
// info.file is the original asset filename
// info.path is the path of the original asset
// info.query is the query
return ;`
},
}),
],
};
$3
Type: Boolean
Default:
Whether to delete the original assets or not.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
deleteOriginalAssets: true,
}),
],
};
$3
> ⚠ Ignored in webpack 5! Please use https://webpack.js.org/configuration/other-options/#cache.
Type: Boolean|String
Default:
Enable file caching.
The default path to cache directory: node_modules/.cache/compression-webpack-plugin.
#### Boolean
Enable/disable file caching.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
cache: true,
}),
],
};
#### String
Enable file caching and set path to cache directory.
webpack.config.js
`js`
module.exports = {
plugins: [
new CompressionPlugin({
cache: 'path/to/cache',
}),
],
};
Examples
$3
Prepare compressed versions of assets using zopfli library.
> ℹ️ @gfx/zopfli require minimum 8 version of node.
To begin, you'll need to install @gfx/zopfli:
`console`
$ npm install @gfx/zopfli --save-dev
webpack.config.js
`js
const zopfli = require('@gfx/zopfli');
module.exports = {
plugins: [
new CompressionPlugin({
compressionOptions: {
numiterations: 15,
},
algorithm(input, compressionOptions, callback) {
return zopfli.gzip(input, compressionOptions, callback);
},
}),
],
};
`
$3
Brotli is a compression algorithm originally developed by Google, and offers compression superior to gzip.
Node 10.16.0 and later has native support for Brotli compression in its zlib module.
We can take advantage of this built-in support for Brotli in Node 10.16.0 and later by just passing in the appropriate algorithm to the CompressionPlugin:
webpack.config.js
`js
const zlib = require('zlib');
module.exports = {
plugins: [
new CompressionPlugin({
filename: '[path].br[query]',
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
compressionOptions: {
// zlib’s level option matches Brotli’s BROTLI_PARAM_QUALITY option.`
level: 11,
},
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
}),
],
};
Note The level option matches BROTLI_PARAM_QUALITY for Brotli-based streams
$3
webpack.config.js
`js
const zlib = require('zlib');
module.exports = {
plugins: [
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
new CompressionPlugin({
filename: '[path].br[query]',
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
compressionOptions: {
level: 11,
},
threshold: 10240,
minRatio: 0.8,
}),
],
};
``
Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.
License
[npm]: https://img.shields.io/npm/v/compression-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/compression-webpack-plugin
[node]: https://img.shields.io/node/v/compression-webpack-plugin.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/webpack-contrib/compression-webpack-plugin.svg
[deps-url]: https://david-dm.org/webpack-contrib/compression-webpack-plugin
[tests]: https://github.com/webpack-contrib/compression-webpack-plugin/workflows/compression-webpack-plugin/badge.svg
[tests-url]: https://github.com/webpack-contrib/compression-webpack-plugin/actions
[cover]: https://codecov.io/gh/webpack-contrib/compression-webpack-plugin/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/webpack-contrib/compression-webpack-plugin
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack
[size]: https://packagephobia.now.sh/badge?p=compression-webpack-plugin
[size-url]: https://packagephobia.now.sh/result?p=compression-webpack-plugin