Why you should use Compression Webpack Plugin?
Tags: webpack, perfs, compression
Published: 2020-04-08 10:22:16

---
title: Why you should use Compression Webpack Plugin?
published: true
date: 2019-04-02 00:00:00 UTC
tags: webpack, perfs, compression
canonical_url: https://slashgear.github.io/why-you-should-use-compression-webpack-plugin/
---

If you are using webpack as module bundler for your application, you probably are concerned by its own performance and loading time.You may have used code splitting, tree shaking, uglifyfication but you may have forgot a very important step.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#compression-is-mandatory)Compression is mandatory

In 2019, if you are not using a compression algorithm to deliver your files in a lighter version to make your website load faster, the situation is critical.Every website performance analyser will tell you to do it. Here is a size comparison of a vanilla [Vue CLI](https://cli.vuejs.org/) website with and without Gzip.

[<picture>
        <source srcset="/static/15d620b40e592ba0943d30e7a40c5dc2/cbe2e/vue-cli-vanilla-size.webp 148w,
/static/15d620b40e592ba0943d30e7a40c5dc2/3084c/vue-cli-vanilla-size.webp 295w,
/static/15d620b40e592ba0943d30e7a40c5dc2/5ca24/vue-cli-vanilla-size.webp 590w,
/static/15d620b40e592ba0943d30e7a40c5dc2/e88ff/vue-cli-vanilla-size.webp 600w" sizes="(max-width: 590px) 100vw, 590px" type="image/webp"></source>
        <source srcset="/static/15d620b40e592ba0943d30e7a40c5dc2/12f09/vue-cli-vanilla-size.png 148w,
/static/15d620b40e592ba0943d30e7a40c5dc2/e4a3f/vue-cli-vanilla-size.png 295w,
/static/15d620b40e592ba0943d30e7a40c5dc2/fcda8/vue-cli-vanilla-size.png 590w,
/static/15d620b40e592ba0943d30e7a40c5dc2/0a47e/vue-cli-vanilla-size.png 600w" sizes="(max-width: 590px) 100vw, 590px" type="image/png"></source>
        <img src="https://slashgear.github.io/static/15d620b40e592ba0943d30e7a40c5dc2/fcda8/vue-cli-vanilla-size.png" alt="Vue CLI vanilla size compared to gzip" title="Vue CLI vanilla size compared to gzip" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;">
      </picture>](/static/15d620b40e592ba0943d30e7a40c5dc2/0a47e/vue-cli-vanilla-size.png)

**Here we reduce 64% of the actual size with Gzip.**

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#compressing-static-files-on-the-fly-is-redondant)Compressing static files on the fly is redondant

Every modern web server has the possibility to compress files on demand.Although Gzip is fast, compressing static files on each demand is anti-pattern.Even if you use a cache in front of your static files requests.

**Static files compression should be done during the build time.**

If you are in a webpack context, adding compression is very easy.

To do so, you can install the _compression-webpack-plugin_ with:

```js
npm install --dev compression-webpack-plugin
```

…and add it in your production configuration:

```js
...
plugins: [
    new CompressionWebpackPlugin(),
]
...
```

In two easy steps, your output static files will have their _.gz_ equivalent.Now if you ship those files on a webserver like [Caddy](https://caddyserver.com/).It will automatically deliver the pre-gzipped version if they exist.However you need to activate it [in Nginx server configuration](http://nginx.org/en/docs/http/ngx_http_gzip_static_module.html).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#should-we-only-generate-gz-)“Should we only generate .gz ?”

If you followed the above steps, you enabled compression on your webserver. That is great!

**But in 2019, Gzip is not the only solution to compress your files.**

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#zopfli)Zopfli

Zopfli is a lossless compression algorithm which has better compression results compared to Gzip with slower compression time.So if you can, you must always use Zopfli compression for static files, instead of basic Gzip.Output files of Zopfli respects the same format as Gzip, browser support is the same.

You can use zopfli [with compression webpack plugin.](https://github.com/webpack-contrib/compression-webpack-plugin#using-zopfli)

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#brotli)Brotli

Brotli is a recent compression algorithm ([RFC 7932](https://tools.ietf.org/html/rfc7932)) with [a great browser support](https://caniuse.com/#search=brotli).Based on a new context modeling and a new file format, brotli is very performant for compressing static files.There is still some difficult parts with brotli (not available on Node < v11, hard to configure on some webservers like Nginx)

You can use brotli [with compression webpack plugin.](https://github.com/webpack-contrib/compression-webpack-plugin#using-zopfli)

[<picture>
        <source srcset="/static/0d631442de390a6737ca967f30f3263d/cbe2e/vue-cli-complete-size.webp 148w,
/static/0d631442de390a6737ca967f30f3263d/3084c/vue-cli-complete-size.webp 295w,
/static/0d631442de390a6737ca967f30f3263d/5ca24/vue-cli-complete-size.webp 590w,
/static/0d631442de390a6737ca967f30f3263d/dad35/vue-cli-complete-size.webp 885w,
/static/0d631442de390a6737ca967f30f3263d/6eb96/vue-cli-complete-size.webp 930w" sizes="(max-width: 590px) 100vw, 590px" type="image/webp"></source>
        <source srcset="/static/0d631442de390a6737ca967f30f3263d/12f09/vue-cli-complete-size.png 148w,
/static/0d631442de390a6737ca967f30f3263d/e4a3f/vue-cli-complete-size.png 295w,
/static/0d631442de390a6737ca967f30f3263d/fcda8/vue-cli-complete-size.png 590w,
/static/0d631442de390a6737ca967f30f3263d/efc66/vue-cli-complete-size.png 885w,
/static/0d631442de390a6737ca967f30f3263d/416ee/vue-cli-complete-size.png 930w" sizes="(max-width: 590px) 100vw, 590px" type="image/png"></source>
        <img src="https://slashgear.github.io/static/0d631442de390a6737ca967f30f3263d/fcda8/vue-cli-complete-size.png" alt="Vue CLI compression results" title="Vue CLI compression results" loading="lazy" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;">
      </picture>](/static/0d631442de390a6737ca967f30f3263d/416ee/vue-cli-complete-size.png)

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#in-conclusion-why-doing-it-with-webpack-)In conclusion: “Why doing it with Webpack ?”

Compressing static files during the build steps is still a moot topic.Some people argue that it is up to the web server to compress the files.In fact, today web servers do not really optimize the compression of static files.

When you compress during the build :

- You can easily see the complete size of your web application (which is great when you want to track web app performances)
- Your app is much more portable (you will easily change your deployment or your web server with pre-compressed assets)
- As a frontend developper you are familiar with the great value of lossless compression.