<div align="center"> <a href="https://github.com/webpack/webpack"> <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg"> </a> </div> [![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. ## Requirements This module requires a minimum of Node v6.9.0 and Webpack v4.0.0. ## 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 module.exports = { plugins: [ new CompressionPlugin() ] } ``` And run `webpack` via your preferred method. ## Options ### `test` Type: `String|RegExp|Array<String|RegExp>` Default: `undefined` Test to match files against. ```js // in your webpack.config.js new CompressionPlugin({ test: /\.js(\?.*)?$/i }) ``` ### `include` Type: `String|RegExp|Array<String|RegExp>` Default: `undefined` Files to include. ```js // in your webpack.config.js new CompressionPlugin({ include: /\/includes/ }) ``` ### `exclude` Type: `String|RegExp|Array<String|RegExp>` Default: `undefined` Files to exclude. ```js // in your webpack.config.js new CompressionPlugin({ exclude: /\/excludes/ }) ``` ### `cache` Type: `Boolean|String` Default: `false` Enable file caching. The default path to cache directory: `node_modules/.cache/compression-webpack-plugin`. #### `Boolean` Enable/disable file caching. ```js // in your webpack.config.js new CompressionPlugin({ cache: true }) ``` #### `String` Enable file caching and set path to cache directory. ```js // in your webpack.config.js new CompressionPlugin({ cache: 'path/to/cache' }) ``` ### `filename` Type: `String|Function` Default: `[path].gz[query]` The target asset filename. #### `String` `[file]` is replaced with the original asset filename. `[path]` is replaced with the path of the original asset. `[query]` is replaced with the query. ```js // in your webpack.config.js new CompressionPlugin({ filename: '[path].gz[query]' }) ``` #### `Function` ```js // in your webpack.config.js 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 `${info.path}.gz${info.query}` } }) ``` ### `algorithm` Type: `String|Function` Default: `gzip` The compression algorithm/function. #### `String` The algorithm is taken from [zlib](https://nodejs.org/api/zlib.html). ```js // in your webpack.config.js new CompressionPlugin({ algorithm: 'gzip' }) ``` #### `Function` Allow to specify a custom compression function. ```js // in your webpack.config.js new CompressionPlugin({ algorithm(input, compressionOptions, callback) { return compressionFunction(input, compressionOptions, callback); } }) ``` ### `compressionOptions` Type: `Object` Default: `{ level: 9 }` If you use custom function for the `algorithm` option, the default value is `{}`. Compression options. You can find all options here [zlib](https://nodejs.org/api/zlib.html#zlib_class_options). ```js // in your webpack.config.js new CompressionPlugin({ compressionOptions: { level: 1 } }) ``` ### `threshold` Type: `Number` Default: `0` Only assets bigger than this size are processed. In bytes. ```js // in your webpack.config.js new CompressionPlugin({ threshold: 8192 }) ``` ### `minRatio` Type: `Number` Default: `0.8` Only assets that compress better than this ratio are processed (`minRatio = Compressed Size / Original Size`). Example: you have `image.png` file with 1024b size, compressed version of file has 768b size, so `minRatio` equal `0.75`. In other words assets will be processed when the `Compressed Size / Original Size` value less `minRatio` value. You can use `1` value to process all assets. ```js // in your webpack.config.js new CompressionPlugin({ minRatio: 0.8 }) ``` ### `deleteOriginalAssets` Type: `Boolean` Default: `false` Whether to delete the original assets or not. ```js // in your webpack.config.js new CompressionPlugin({ deleteOriginalAssets: true }) ``` ## Examples ### Using Zopfli 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); } }) ] } ``` ## Contributing Please take a moment to read our contributing guidelines if you haven't yet done so. [CONTRIBUTING](./.github/CONTRIBUTING.md) ## License [MIT](./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://img.shields.io/circleci/project/github/webpack-contrib/compression-webpack-plugin.svg [tests-url]: https://circleci.com/gh/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 [size]: https://packagephobia.now.sh/badge?p=compression-webpack-plugin [size-url]: https://packagephobia.now.sh/result?p=compression-webpack-plugin