Bundle vue.js - gzip compression

Sometimes loading compiled vue.js bundles takes a long time, in such case it makes sense to set gzip compression.

To do this, need to install webpack CompressionPlugin, after this in the file vue.config.js:

const CompressionPlugin = require("compression-webpack-plugin");

  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: "gzip",
      }),
    ]
  },

as a result, after compilation, you will have compressed files:

Then should set up NGINX, in *.conf file insert this text:

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_types text/plain text/xml text/css
             text/comma-separated-values
             text/javascript application/x-javascript
             application/atom+xml;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";

gzip on - enable GZIP compression.

gzip_static on - enable GZIP static files compression.

gzip_disable "msie6" - exclude IE6 from browsers that will receive compressed files (does not support gzip).

gzip_buffers - sets the number and size of buffers into which the response will be compressed.

gzip_proxied - compress response data for proxy servers.

gzip_types – specifies the file types to be compressed.

gzip_min_length – compress files that are larger than 1024 bytes (1kb)

It must be remembered, that a request for /path/to/bundle.js, NGINX tries to find and send the file /path/to/bundle.js.gz. If the file doesn’t exist, or the client does not support gzip, NGINX sends the uncompressed version of the file.

Note that the gzip_static directive does not enable on-the-fly compression. To compress files we use CompressionPlugin.

As a result of compression, I managed to reduce the size of the sent bundle by 3-4 times