"Simple Performance Tuning" dual-end Gzip guide

Contents of this article:

Benefits of enabling Gzip compression
Gzip Settings for Webpack
Gzip Settings for Nginx
How do I validate GZIP?
Dual – endian Gzip difference and its significance

1. Benefits of enabling Gzip compression

Can reduce the file size, faster transfer speed. Gzip is an effective way to save bandwidth and speed up your site.

When sending data, you can set Content-encoding: gzip. The user describes the data compression mode

After the client receives the data to check the information of the corresponding field, it can decode according to the corresponding format.

Accept-encoding :gzip can be used when the client requests, and the user states which compression methods are acceptable.

In THE HTTP / 1.0 protocol, you can configure a content-Encoding field for data sent from the server. This field specifies how the data is compressed

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

After receiving the returned data, the client checks the information of the corresponding field, and then decodes it according to the corresponding format. A client can specify which compression methods it accepts with the accept-Encoding field at request time.

Accept-Encoding: gzip, deflate
Copy the code

2. `Webpack`the`gzip`Set up the

The plug-in used here is CompressionWebpackPlugin

Const CompressionWebpackPlugin = require ('compression-webpack-plugin'Module. Exports = {" plugins ": [new CompressionWebpackPlugin]}Copy the code

Specific configuration:

const CompressionWebpackPlugin = require('compression-webpack-plugin');

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip'.test: new RegExp('\\.(js|css)$'), // only files larger than xx bytes will be processed, default: 0 threshold: 10240, // example: a 1024b file with compressed size 768b, minRatio: 0.75 minRatio: 0.8 // default: 0.8 // Whether to delete the source file. Default:false
      deleteOriginalAssets: false}))Copy the code

gzip
277KB
~ 91.2 KB

3. `Nginx`the`gzip`Set up the

Open /etc/nginx/conf.d to write the following configuration.

server {
    gzip on;
    gzip_static on;    
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied  any;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    Note: 99.99% of all browsers support gzip decompression, so you don't need to set this value and keep the system default.Gzip_http_version 1.1; . }Copy the code

gzip on|off:

Default value:gzip off
On or offgzipThe module

gzip_static on|off:

Default value: gzip_static off
nginxProcessing module for static files
This module can read pre-compressedgzFile so that each request can be reducedgzipCompression of theCPUResource consumption.
When this module is enabled,nginxFirst check to see if there are any requests for static filesgzThe end file, if any, is returned directlygzFile contents.
In order to be compatible not supportedgzipBrowser, enabledgzip_staticThe module must retain both the original static file andgzFile. This will greatly increase disk space in the case of a large number of static files. We can usenginxThe reverse proxy feature implementation is reserved onlygzFile.

gzip_types mime-type[mime-type...]:

Default value:gzip_types text/html(Js/CSS files are not compressed by default)
nginxThe result returned by the backend server when enabled, turned on, or turned off as a reverse proxy, matches only if the backend server returns contains"Via"theheaderHead.
Compression type, matching the MIME type for compression

gzip_proxied[off|expired|no-cache|no-store]... :

off– Disables compression of all proxy result data
no-cache– Enable compression ifheaderContained in the header"Cache-Control:no-cache"Header information

gzip_vary on|off:

andhttpThe head matters. Add onevaryHeader, used for proxy servers, some browsers support compression, some do not support compression, so avoid wasting unsupported compression, so depending on the clientHTTPHead to determine whether compression is required

gzip_comp_level:

Default value: 1(4 to 6 are recommended)
Gzip Compression ratio/compression level. The compression level ranges from 1 to 9. The higher the compression level, the higher the compression rate and the longer the compression time (faster transmission but more CPU consumption).

gzip_buffers:

Default value: gzip_buffers44K / 8K
Set the system to get several units of cache for storing gzip’s compressed resulting data stream.
For example, 4 4K indicates that the memory size is four times the original data size in 4K. 4 8K indicates that the unit is 8 KB. The unit is four times the original data size.
If not, the default is to request the same amount of memory as the original data to store the gzip compressed results.

gzip_http_version:

Default: gzip_http_version1.1(that is, HTTP/1.1 requests are gzip compressed)
Note: 99.99% of all browsers support gzip decompression, so you don’t need to set this value and keep the system default.

After saving the configuration, restart Nginx:

$ sudo service nginx restart
Copy the code

4. How do I verify GZIP?

You can use “Network” to curl up.

Test each resource’s request response using curl and check content-encoding:

If content-Encoding :gzip is displayed, the configuration is successful.

5. Difference and significance of double-ended Gzip

The differences are:

Webpack compression compresses the files once during the build run, and then saves the compressed versions to disk.
Some packages may have caching built in when Nginx compresses files on request, so the performance penalty only occurs once (or infrequently), but the usual difference is that this occurs in response to HTTP requests.
For real-time compression, it is often more efficient to have upstream proxies (such as Nginx) handle Gzip and caching because they are built specifically for this purpose and do not suffer the runtime overhead of server-side programs (many of which are written in C).
The advantage of using Webpack is that every time Nginx requests the server has to compress the information for a long time before returning it, which not only increases the server overhead, but also makes the requester impatient to wait. Using Nginx as a double guarantee is much more efficient when we generate high-compression files directly when Webpack is packaged and put them on the server as static resources.
Note: Depending on the business of the project, whether it is compressed in real time at request time or generated at build time.

disclaimer

I’m not going to teach Webpack or Nginx, I just wrote it for fun.

~~It means it’s a little rough. Don’t yell at me…~~

Ask for a push in Shenzhen

All right, let’s finish another one and get to the point:

WeChat:huab119
Email address:[email protected]

A collection of articles by authors digging for gold

“Vue Practice” 5 minutes for a Vue CLI plug-in
“Vue practices” arm your front-end projects
“Intermediate and advanced front-end interview” JavaScript handwritten code unbeatable secrets
The answer to the Vue question “Learn from source” that no interviewer knows
“Learn from the source” Vue source JS operations
“Learn from source” thoroughly understand the Vue option Props
The “Vue Practice” project upgrades vuE-CLI3 to correct posture
Why do you never understand JavaScript scope chains?

The public,

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

“Simple Performance Tuning” dual-end Gzip guide

Contents of this article:

1. Benefits of enabling Gzip compression

2. `Webpack`the`gzip`Set up the

3. `Nginx`the`gzip`Set up the

4. How do I verify GZIP?

5. Difference and significance of double-ended Gzip

disclaimer

Ask for a push in Shenzhen

A collection of articles by authors digging for gold

The public,

“Simple Performance Tuning” dual-end Gzip guide

Contents of this article:

1. Benefits of enabling Gzip compression

2. WebpackthegzipSet up the

3. NginxthegzipSet up the

4. How do I verify GZIP?

5. Difference and significance of double-ended Gzip

disclaimer

Ask for a push in Shenzhen

A collection of articles by authors digging for gold

The public,

Related Posts

ES6- Day 4 (Extending objects and Extending Arrays)

【 1.1W word 】 Interview often ask Javascript event loop, synchronous asynchronous, macro and micro tasks, thoroughly understand the original so simple

Tapable, this one is enough

2. `Webpack`the`gzip`Set up the

3. `Nginx`the`gzip`Set up the