“This is the 19th day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

GZIP compression

GZIP compression, is usually seen. Gz end of the file; However, GZIP can only compress a single file.

So, the.tar.gz files that Linux downloads are actually archived with tar files and then compressed into Gzip files.

Nginx supports GZIP for transmission and optimizes static file loading such as JS, CSS and HTML pages.

Vue packaging

Although Nginx can start compression, it can be compressed during the Vue packaging process, which can relieve the pressure on the server CPU.

And what we want to do is very simple:

• The installationcompression-webpack-plugin
• Modify the WebPack configuration (vue.config.js) and pack it
• Nginx deploys and modifies the configuration

compression-webpack-plugin

This time we use the compression-webpack-plugin for compression.

The installation

First we install this plugin:

npm install compression-webpack-plugin --save-dev
Copy the code

Since we only use it during the packaging phase, we use the –save-dev parameter, and you can also add the -d parameter.

Of course, if you use vue-CLI 4.x and rely on webpack4.x, then you can only use the old version of the compression-webpack-plugin and the new version relies on Webpack 5.x:

npm i compression-webpack-plugin@6.1. 0 -D
Copy the code

Otherwise, it will appear:

TypeError: Cannot read property 'NormalModule' of undefined
Copy the code

documentation

You are advised to check the official document: github.com/webpack-con…

Example Command output:

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

module.exports = {
  plugins: [new CompressionPlugin()],
};
Copy the code

Optional parameters:

Parameter names	type	The default value	describe
test	{String|RegExp|Array<String|RegExp>}	undefined	Process all resources that match this {RegExp}
include	{String|RegExp|Array<String|RegExp>}	undefined	Include target content
exclude	{String|RegExp|Array<String|RegExp>}	undefined	Exclude target content
algorithm	{String|Function}	gzip	Can be (buffer, cb) => cb(buffer) or {String} using the algorithm in zlib
compressionOptions	{Object}	maximum available compression level, for gzip: { level: 9 }	Compression options (compression levels, etc.)
threshold	{Number}	0	The smallest file in bytes to start compression
minRatio	{Number}	0.8	Only resources with compression rates lower than this value are processed
filename	{String|Function}	[path][base].gz	A {Function} (asset) => asset Function that takes the old resource name (via the asset option) and returns the new resource name
deleteOriginalAssets	{Boolean|’keep-source-map’}	false	Whether to delete the original resource

In general, the test regex matches need to be written, and the rest should be left as default.

vue.config.js

Now we can write it in vue.config.js, because vue supports chained configuration, so:

let productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/i;

module.exports = {
  chainWebpack: config= > {
    if (process.env.NODE_ENV === 'production') {
    config.plugin("CompressionPlugin").use('compression-webpack-plugin'[{filename: '[path][base].gz'.algorithm: 'gzip'.// File to compress (re)
          test: productionGzipExtensions,
          // Enable compression for minimum files
          threshold: 10240.minRatio: 0.8}}}}]),Copy the code

That’s it. Let’s compile and see what happens.

packaging

Packaging:

npm run build
Copy the code

In addition, I use Bootstrap5, which is also packaged;

Compression rate can also be:

Next, deploy on Nginx.

Nginx set

Nginx has nothing to set up. Nginx supports both dynamic and static Gzip. The difference between the two is that static Gzip is loaded directly from an existing. Gz file, while dynamic Gzip is loaded in real time (high CPU load).

Therefore, we normally enable both modes, and add:

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

To use gzip compression:

After starting gzip compression:

Of course, it’s best to open the Gzip that comes with Nginx:

    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    gzip on;
    gzip_min_length 1k;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
Copy the code

END

Finally, at this point, our compression-webpack-plugin is configured. For more details, see the Gzip property of Nginx. Gz files are compiled to reduce CPU stress.