Principle of use:

How do I enable Gzip compression?

You may have heard of front-end Gzip, which is enabled via Webpack to compress files.

  • Compression will webpack – plugin plug-in

Also heard about node.js middle layer, configure gzip to compress files.

  • Compression will middleware

I’m sure you’ve seen some articles about Nginx configuring Gzip.

Principle:

The client uses the request header to tell the server what compression mode is used. (Gzip, Deflate, etc.)

This way the server knows what to decompress.

Accept-Encoding: gzip, deflate
Copy the code

The server, through the response header, tells the client how to compress

Content-Encoding: gzip
Content-Encoding: deflate
Copy the code

Gzip compression configuration

The detailed configuration of WebPack is not mentioned here.

Static compression:

With Webpack compression, files of 600 + K can be compressed to 120 + K.

When the client deploys the compressed file to the server, it’s the server’s job.

Using Nginx as an example, servers support gzip compressed files using Nginx configuration. Then restart Nginx.

Before compression:

After the compression:

2.66s before compression, 589ms after compression. The speed of improvement is not only visible to the naked eye. That’s a 75% increase.

Now we present the client and server configuration.

Client (Webpack) :

if (config.build.productionGzip) { var CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: New RegExp (' \ \. (' + config. Build. ProductionGzipExtensions. Join (' | ') + ') $'), the threshold: 10240, minRatio: 0.8}}))Copy the code

Server (Nginx) :

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";
gzip_vary           on;
Copy the code

Dynamic compression

Dynamic compression only needs to be changed on the server, not the client, so let’s just look at the Nginx configuration.

gzip             on;
gzip_min_length  1000;
gzip_proxied     expired no-cache no-store private auth;
gzip_types       text/plain application/xml;
Copy the code

Don’t forget to restart Nginx after configuration.

Disadvantages:

Whether it’s dynamic compression or static compression, we know that the compression process will consume CPU resources.

The higher the compression ratio, the higher the CPU usage.

Conclusion:

That’s all for gzip compression, and if I understand other knowledge, I will add it again, thank you for correcting!!