136.8529c97ef95fabba53e6.chunk.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[136],{397:function(n,s,a){"use strict";a.r(s),s.default='<p><a href="https://npmjs.com/package/compression-webpack-plugin"><img src="https://img.shields.io/npm/v/compression-webpack-plugin.svg" alt="npm"></a>\n<a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/compression-webpack-plugin.svg" alt="node"></a>\n<a href="https://david-dm.org/webpack-contrib/compression-webpack-plugin"><img src="https://david-dm.org/webpack-contrib/compression-webpack-plugin.svg" alt="deps"></a>\n<a href="https://github.com/webpack-contrib/compression-webpack-plugin/actions"><img src="https://github.com/webpack-contrib/compression-webpack-plugin/workflows/compression-webpack-plugin/badge.svg" alt="tests"></a>\n<a href="https://codecov.io/gh/webpack-contrib/compression-webpack-plugin"><img src="https://codecov.io/gh/webpack-contrib/compression-webpack-plugin/branch/master/graph/badge.svg" alt="cover"></a>\n<a href="https://gitter.im/webpack/webpack"><img src="https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg" alt="chat"></a>\n<a href="https://packagephobia.now.sh/result?p=compression-webpack-plugin"><img src="https://packagephobia.now.sh/badge?p=compression-webpack-plugin" alt="size"></a></p>\n<p>Prepare compressed versions of assets to serve them with Content-Encoding.</p>\n<h2 id="getting-started">Getting Started<a href="#getting-started" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>To begin, you\'ll need to install <code>compression-webpack-plugin</code>:</p>\n<pre><code class="hljs language-console">$ npm install compression-webpack-plugin --save-dev\n</code></pre>\n<p>Then add the plugin to your <code>webpack</code> config. For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> CompressionPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"compression-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>And run <code>webpack</code> via your preferred method.</p>\n<h2 id="options">Options<a href="#options" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<table>\n<thead>\n<tr>\n<th align="center">Name</th>\n<th align="center">Type</th>\n<th align="center">Default</th>\n<th align="left">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#test"><code>test</code></a></strong><p class="description mobile"><code>{String\\|RegExp\\|Array&#x3C;String\\|RegExp>}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{String\\|RegExp\\|Array&#x3C;String\\|RegExp>}</code></td>\n<td align="center"><code>undefined</code></td>\n<td align="left">Include all assets that pass test assertion</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#include"><code>include</code></a></strong><p class="description mobile"><code>{String\\|RegExp\\|Array&#x3C;String\\|RegExp>}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{String\\|RegExp\\|Array&#x3C;String\\|RegExp>}</code></td>\n<td align="center"><code>undefined</code></td>\n<td align="left">Include all assets matching any of these conditions</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#exclude"><code>exclude</code></a></strong><p class="description mobile"><code>{String\\|RegExp\\|Array&#x3C;String\\|RegExp>}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{String\\|RegExp\\|Array&#x3C;String\\|RegExp>}</code></td>\n<td align="center"><code>undefined</code></td>\n<td align="left">Exclude all assets matching any of these conditions</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#algorithm"><code>algorithm</code></a></strong><p class="description mobile"><code>{String\\|Function}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{String\\|Function}</code></td>\n<td align="center"><code>gzip</code></td>\n<td align="left">The compression algorithm/function</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#compressionoptions"><code>compressionOptions</code></a></strong><p class="description mobile"><code>{Object}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Object}</code></td>\n<td align="center">maximum available compression level, for gzip: \n<code>{ level: 9 }</code></td>\n<td align="left">Compression options for \n<code>algorithm</code></td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#threshold"><code>threshold</code></a></strong><p class="description mobile"><code>{Number}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Number}</code></td>\n<td align="center"><code>0</code></td>\n<td align="left">Only assets bigger than this size are processed (in bytes)</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#minratio"><code>minRatio</code></a></strong><p class="description mobile"><code>{Number}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Number}</code></td>\n<td align="center"><code>0.8</code></td>\n<td align="left">Only assets that compress better than this ratio are processed (\n<code>minRatio = Compressed Size / Original Size</code>\n)</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#filename"><code>filename</code></a></strong><p class="description mobile"><code>{String\\|Function}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{String\\|Function}</code></td>\n<td align="center"><code>[path][base].gz</code></td>\n<td align="left">The target asset filename</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><strong><a href="#deleteoriginalassets"><code>deleteOriginalAssets</code></a></strong><p class="description mobile"><code>{Boolean\\|\'keep-source-map\'}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean\\|\'keep-source-map\'}</code></td>\n<td align="center"><code>false</code></td>\n<td align="left">Whether to delete the original assets or not</td>\n</tr>\n</tbody>\n</table>\n<h3 id="test"><code>test</code><a href="#test" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|RegExp|Array&#x3C;String|RegExp></code>\nDefault: <code>undefined</code></p>\n<p>Include all assets that pass test assertion.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      test<span class="token punctuation">:</span> <span class="token regex">/\\.js(\\?.*)?$/i</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="include"><code>include</code><a href="#include" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|RegExp|Array&#x3C;String|RegExp></code>\nDefault: <code>undefined</code></p>\n<p>Include all assets matching any of these conditions.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      include<span class="token punctuation">:</span> <span class="token regex">/\\/includes/</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="exclude"><code>exclude</code><a href="#exclude" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|RegExp|Array&#x3C;String|RegExp></code>\nDefault: <code>undefined</code></p>\n<p>Exclude all assets matching any of these conditions.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      exclude<span class="token punctuation">:</span> <span class="token regex">/\\/excludes/</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="algorithm"><code>algorithm</code><a href="#algorithm" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|Function</code>\nDefault: <code>gzip</code></p>\n<p>The compression algorithm/function.</p>\n<blockquote>\n<p>ℹ️ If you use custom function for the <code>algorithm</code> option, the default value of the <code>compressionOptions</code> option is <code>{}</code>.</p>\n</blockquote>\n<h4 id="string"><code>String</code><a href="#string" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>The algorithm is taken from <a href="https://nodejs.org/api/zlib.html">zlib</a>.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      algorithm<span class="token punctuation">:</span> <span class="token string">"gzip"</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function"><code>Function</code><a href="#function" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Allow to specify a custom compression function.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      <span class="token function">algorithm</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> compressionOptions<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token keyword">return</span> <span class="token function">compressionFunction</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> compressionOptions<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="compressionoptions"><code>compressionOptions</code><a href="#compressionoptions" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Object</code>\nDefault: <code>{ level: 9 }</code></p>\n<p>Compression options for <code>algorithm</code>.</p>\n<p>You can find all options here <a href="https://nodejs.org/api/zlib.html#zlib_class_options">zlib</a>.</p>\n<blockquote>\n<p>ℹ️ If you use custom function for the <code>algorithm</code> option, the default value is <code>{}</code>.</p>\n</blockquote>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      compressionOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span> level<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="threshold"><code>threshold</code><a href="#threshold" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Number</code>\nDefault: <code>0</code></p>\n<p>Only assets bigger than this size are processed. In bytes.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      threshold<span class="token punctuation">:</span> <span class="token number">8192</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="minratio"><code>minRatio</code><a href="#minratio" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Number</code>\nDefault: <code>0.8</code></p>\n<p>Only assets that compress better than this ratio are processed (<code>minRatio = Compressed Size / Original Size</code>).\nExample: you have <code>image.png</code> file with 1024b size, compressed version of file has 768b size, so <code>minRatio</code> equal <code>0.75</code>.\nIn other words assets will be processed when the <code>Compressed Size / Original Size</code> value less <code>minRatio</code> value.</p>\n<p>You can use <code>1</code> value to process assets that are smaller than the original.</p>\n<p>Use a value of <code>Infinity</code> to process all assets even if they are larger than the original size or their original size is <code>0</code> bytes (useful when you are pre-zipping all assets for AWS).</p>\n<p>Use a value of <code>Number.MAX_SAFE_INTEGER</code> to process all assets even if they are larger than the original size, excluding assets with their original size is <code>0</code> bytes.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      <span class="token comment">// Compress all assets, including files with `0` bytes size</span>\n      <span class="token comment">// minRatio: Infinity</span>\n\n      <span class="token comment">// Compress all assets, excluding files with `0` bytes size</span>\n      <span class="token comment">// minRatio: Number.MAX_SAFE_INTEGER</span>\n\n      minRatio<span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="filename"><code>filename</code><a href="#filename" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|Function</code>\nDefault: <code>"[path][base].gz"</code></p>\n<p>The target asset filename.</p>\n<h4 id="string-1"><code>String</code><a href="#string-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>For example we have <code>assets/images/image.png?foo=bar#hash</code>:</p>\n<p><code>[path]</code> is replaced with the directories to the original asset, included trailing <code>/</code> (<code>assets/images/</code>).</p>\n<p><code>[file]</code> is replaced with the path of original asset (<code>assets/images/image.png</code>).</p>\n<p><code>[base]</code> is replaced with the base (<code>[name]</code> + <code>[ext]</code>) of the original asset (<code>image.png</code>).</p>\n<p><code>[name]</code> is replaced with the name of the original asset (<code>image</code>).</p>\n<p><code>[ext]</code> is replaced with the extension of the original asset, included <code>.</code> (<code>.png</code>).</p>\n<p><code>[query]</code> is replaced with the query of the original asset, included <code>?</code> (<code>?foo=bar</code>).</p>\n<p><code>[fragment]</code> is replaced with the fragment (in the concept of URL it is called <code>hash</code>) of the original asset (<code>#hash</code>).</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      filename<span class="token punctuation">:</span> <span class="token string">"[path][base].gz"</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function-1"><code>Function</code><a href="#function-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      <span class="token function">filename</span><span class="token punctuation">(</span>pathData<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token comment">// The `pathData` argument contains all placeholders - `path`/`name`/`ext`/etc</span>\n        <span class="token comment">// Available properties described above, for the `String` notation</span>\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/\\.svg$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>pathData<span class="token punctuation">.</span>filename<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n          <span class="token keyword">return</span> <span class="token string">"assets/svg/[path][base].gz"</span><span class="token punctuation">;</span>\n        <span class="token punctuation">}</span>\n\n        <span class="token keyword">return</span> <span class="token string">"assets/js/[path][base].gz"</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="deleteoriginalassets"><code>deleteOriginalAssets</code><a href="#deleteoriginalassets" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean | \'keep-source-map\'</code>\nDefault: <code>false</code></p>\n<p>Whether to delete the original assets or not.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      deleteOriginalAssets<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>To exclude sourcemaps from compression</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      exclude<span class="token punctuation">:</span> <span class="token regex">/.map$/</span>\n      deleteOriginalAssets<span class="token punctuation">:</span> <span class="token string">\'keep-source-map\'</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="examples">Examples<a href="#examples" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="using-zopfli">Using Zopfli<a href="#using-zopfli" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Prepare compressed versions of assets using <code>zopfli</code> library.</p>\n<blockquote>\n<p>ℹ️ <code>@gfx/zopfli</code> require minimum <code>8</code> version of <code>node</code>.</p>\n</blockquote>\n<p>To begin, you\'ll need to install <code>@gfx/zopfli</code>:</p>\n<pre><code class="hljs language-console">$ npm install @gfx/zopfli --save-dev\n</code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> zopfli <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@gfx/zopfli"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      compressionOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n        numiterations<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token function">algorithm</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> compressionOptions<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n        <span class="token keyword">return</span> zopfli<span class="token punctuation">.</span><span class="token function">gzip</span><span class="token punctuation">(</span>input<span class="token punctuation">,</span> compressionOptions<span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="using-brotli">Using Brotli<a href="#using-brotli" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p><a href="https://en.wikipedia.org/wiki/Brotli">Brotli</a> is a compression algorithm originally developed by Google, and offers compression superior to gzip.</p>\n<p>Node 10.16.0 and later has <a href="https://nodejs.org/api/zlib.html#zlib_zlib_createbrotlicompress_options">native support</a> for Brotli compression in its zlib module.</p>\n<p>We can take advantage of this built-in support for Brotli in Node 10.16.0 and later by just passing in the appropriate <code>algorithm</code> to the CompressionPlugin:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> zlib <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"zlib"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      filename<span class="token punctuation">:</span> <span class="token string">"[path][base].br"</span><span class="token punctuation">,</span>\n      algorithm<span class="token punctuation">:</span> <span class="token string">"brotliCompress"</span><span class="token punctuation">,</span>\n      test<span class="token punctuation">:</span> <span class="token regex">/\\.(js|css|html|svg)$/</span><span class="token punctuation">,</span>\n      compressionOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n        params<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          <span class="token punctuation">[</span>zlib<span class="token punctuation">.</span>constants<span class="token punctuation">.</span><span class="token constant">BROTLI_PARAM_QUALITY</span><span class="token punctuation">]</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>github<span class="token punctuation">.</span>com<span class="token operator">/</span>webpack<span class="token operator">-</span>contrib<span class="token operator">/</span>compression<span class="token operator">-</span>webpack<span class="token operator">-</span>plugin<span class="token operator">/</span>blob<span class="token operator">/</span>master<span class="token operator">/</span><span class="token number">11</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      threshold<span class="token punctuation">:</span> <span class="token number">10240</span><span class="token punctuation">,</span>\n      minRatio<span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>\n      deleteOriginalAssets<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>Note</strong> Brotli’s <code>BROTLI_PARAM_QUALITY</code> option is functionally equivalent to zlib’s <code>level</code> option.\nYou can find all Brotli’s options in <a href="https://nodejs.org/api/zlib.html#zlib_class_brotlioptions">the relevant part of the zlib module documentation</a>.</p>\n<h3 id="multiple-compressed-versions-of-assets-for-different-algorithm">Multiple compressed versions of assets for different algorithm<a href="#multiple-compressed-versions-of-assets-for-different-algorithm" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> zlib <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"zlib"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      filename<span class="token punctuation">:</span> <span class="token string">"[path][base].gz"</span><span class="token punctuation">,</span>\n      algorithm<span class="token punctuation">:</span> <span class="token string">"gzip"</span><span class="token punctuation">,</span>\n      test<span class="token punctuation">:</span> <span class="token regex">/\\.js$|\\.css$|\\.html$/</span><span class="token punctuation">,</span>\n      threshold<span class="token punctuation">:</span> <span class="token number">10240</span><span class="token punctuation">,</span>\n      minRatio<span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n    <span class="token keyword">new</span> <span class="token class-name">CompressionPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      filename<span class="token punctuation">:</span> <span class="token string">"[path][base].br"</span><span class="token punctuation">,</span>\n      algorithm<span class="token punctuation">:</span> <span class="token string">"brotliCompress"</span><span class="token punctuation">,</span>\n      test<span class="token punctuation">:</span> <span class="token regex">/\\.(js|css|html|svg)$/</span><span class="token punctuation">,</span>\n      compressionOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n        params<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n          <span class="token punctuation">[</span>zlib<span class="token punctuation">.</span>constants<span class="token punctuation">.</span><span class="token constant">BROTLI_PARAM_QUALITY</span><span class="token punctuation">]</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>github<span class="token punctuation">.</span>com<span class="token operator">/</span>webpack<span class="token operator">-</span>contrib<span class="token operator">/</span>compression<span class="token operator">-</span>webpack<span class="token operator">-</span>plugin<span class="token operator">/</span>blob<span class="token operator">/</span>master<span class="token operator">/</span><span class="token number">11</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      <span class="token punctuation">}</span><span class="token punctuation">,</span>\n      threshold<span class="token punctuation">:</span> <span class="token number">10240</span><span class="token punctuation">,</span>\n      minRatio<span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n  <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="contributing">Contributing<a href="#contributing" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Please take a moment to read our contributing guidelines if you haven\'t yet done so.</p>\n<p><a href="https://github.com/webpack-contrib/compression-webpack-plugin/blob/master/.github/CONTRIBUTING.md">CONTRIBUTING</a></p>\n<h2 id="license">License<a href="#license" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p><a href="https://github.com/webpack-contrib/compression-webpack-plugin/blob/master/LICENSE">MIT</a></p>\n'}}]);