Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 137 additions & 51 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
[![test][test]][test-url]
[![coverage][cover]][cover-url]
[![chat][chat]][chat-url]

<div align="center">
<!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
<a href="https://github.com/webpack/webpack">
<img width="200" height="200" vspace="" hspace="25"
<img width="200" height="200"
src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
</a>
<h1>Compression Plugin</h1>
<p>Prepare compressed versions of assets to serve them with Content-Encoding.<p>
<p>Prepare compressed versions of assets to serve them with Content-Encoding<p>
</div>

<h2 align="center">Install</h2>
Expand All @@ -20,78 +22,162 @@ npm i -D compression-webpack-plugin

<h2 align="center">Usage</h2>

``` javascript
var CompressionPlugin = require("compression-webpack-plugin");
**webpack.config.js**
```js
const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
plugins: [
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.(js|html)$/,
threshold: 10240,
minRatio: 0.8
})
]
plugins: [
new CompressionPlugin(...options)
]
}
```

Arguments:
<h2 align="center">Options</h2>

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`test`**|`{RegExp}`|`.`|All assets matching this `{RegExp}` are processed|
|**`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 that this ratio are processed|
|**`deleteOriginalAssets`**|`{Boolean}`|`false`|Whether to delete the original assets or not|

* `asset`: 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. Defaults to `"[path].gz[query]"`.
* `filename`: A `function(asset)` which receives the asset name (after processing `asset` option) and returns the new asset name. Defaults to `false`.
* `algorithm`: Can be a `function(buf, callback)` or a string. For a string the algorithm is taken from `zlib` (or zopfli for `zopfli`). Defaults to `"gzip"`.
* `test`: All assets matching this RegExp are processed. Defaults to every asset.
* `threshold`: Only assets bigger than this size are processed. In bytes. Defaults to `0`.
* `minRatio`: Only assets that compress better that this ratio are processed. Defaults to `0.8`.
* `deleteOriginalAssets`: Whether to delete the original assets or not. Defaults to `false`.

Option Arguments for Zopfli (see [node-zopfli](https://github.com/pierreinglebert/node-zopfli#options) doc for details):
* verbose: Default: false,
* verbose_more: Default: false,
* numiterations: Default: 15,
* blocksplitting: Default: true,
* blocksplittinglast: Default: false,
* blocksplittingmax: Default: 15
### `test`

**webpack.config.js**
```js
[
new CompressionPlugin({
test: /\.js/
})
]
```

### `asset`

**webpack.config.js**
```js
[
new CompressionPlugin({
asset: '[path].gz[query]'
})
]
```

### `filename`

**webpack.config.js**
```js
[
new CompressionPlugin({
filename (asset) {
asset = 'rename'
return asset
}
})
]
```

### `algorithm`

**webpack.config.js**
```js
[
new CompressionPlugin({
algorithm: 'gzip'
})
]
```

### `threshold`

**webpack.config.js**
```js
[
new CompressionPlugin({
threshold: 0
})
]
```

### `minRatio`

**webpack.config.js**
```js
[
new CompressionPlugin({
minRatio: 0.8
})
]
```

### `deleteOriginalAssets`

**webpack.config.js**
```js
[
new CompressionPlugin({
deleteOriginalAssets: true
})
]
```

<h2 align="center">Maintainers</h2>

<table>
<tbody>
<tr>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150">
<tr>
<td align="center">
<a href="https://github.com/d3viant0ne">
<img width="150" height="150" src="https://github.com/d3viant0ne.png?v=3&s=150">
</br>
<a href="https://github.com/bebraw">Juho Vepsäläinen</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150">
Joshua Wiens
</a>
</td>
<td align="center">
<a href="https://github.com/bebraw">
<img width="150" height="150" src="https://github.com/bebraw.png?v=3&s=150">
</br>
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150">
Juho Vepsäläinen
</a>
</td>
<td align="center">
<a href="https://github.com/michael-ciniawsky">
<img width="150" height="150" src="https://github.com/michael-ciniawsky.png?v=3&s=150">
</br>
<a href="https://github.com/SpaceK33z">Kees Kluskens</a>
</td>
<td align="center">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150">
Michael Ciniawsky
</a>
</td>
<td align="center">
<a href="https://github.com/evilebottnawi">
<img width="150" height="150" src="https://github.com/evilebottnawi.png?v=3&s=150">
</br>
<a href="https://github.com/TheLarkInn">Sean Larkin</a>
</td>
</tr>
Alexander Krasnoyarov
</a>
</td>
</tr>
<tbody>
</table>


[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

[test]: https://secure.travis-ci.org/webpack-contrib/compression-webpack-plugin.svg
[test-url]: http://travis-ci.org/webpack-contrib/compression-webpack-plugin

[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