Touch your hand to teach you how to optimize GIZP

gizpWhether to use comparative analysis

1. Configure Gzip on the client

Webpack configure gzip, the client is packed into a. Gz file in advance, this operation can be configured (or not configured)

Using the WebPack plugin to configure Gzip, older versions will fail, install version 5.0.1

NPM [email protected] – I D

The vue. Config. Js

//gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');/ / introduce compression will - webpack - the plugin
// Match the resource for this {RegExp}
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i

module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: "[path].gz[query]".// Target resource name
                algorithm: "gzip".test: productionGzipExtensions, // Process all resources that match this {RegExp}
                threshold: 10240.// Only resources larger than this value are processed. By byte (set above 10K for compression)
                minRatio: 0.8 // Only resources with compression rates lower than this value will be processed}}})]Copy the code

2. Configure gzip for nginx

http {
    # ----------------------------- gzip start -----------------------------
    Enable and disable gzip mode
    gzip on;

    #gizp compression starting point, files greater than 1K to compress
    gzip_min_length 1k;

    # gzip compression level, 1-9, the larger the compression, the better, also more CPU time
    gzip_comp_level 5;

    The type of file to compress.
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

    #nginx for static file processing module, when enabled, will look for files ending with.gz, directly return, do not use CPU compression, if not found, do not compress
    gzip_static on;

    Whether to add Vary: accept-encoding to the HTTP header is recommended
    gzip_vary on;

    Set the size of the buffer required for compression, in 4k, if the file size is 7K, apply 2* 4K buffer
    gzip_buffers 2 4k;

    Set the HTTP protocol version for gzip compression
    gzip_http_version 1.1;
    # ----------------------------- gzip end -----------------------------

}
Copy the code

Pay attention to the point gzip_static on;

When this property is turned on, it gives priority to the front end’s packed. Gz files.

For the firstngxinThe installationgzip_staticThe module

• Gzip_static problem reference is missing

## configuration
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
## reinstall
make && make install
Copy the code

The last restartnginxWill take effect in the

./nginx -s reload

Effect of 3,

4. Digression -Brotli

Based on the 2021-7-5

1. Gzip is used for taobao and Jd official websites

The Nuggets used Brotli

• Javascript files compressed using Brotli are 14% smaller than gzip.
• HTML files are 21% smaller than Gzip.
• CSS files are 17% smaller than GZIP.

Reference -Brotli vs. gzip