How to enable gzip compression in vue

What is gzip:

Gzip is a compression algorithm that is very commonly used in network transmission.

It should be noted that Gzip compression only has obvious hints for text-type resources, and the volume after compression is about 1/3 of that before compression.

But for pictures,audio and video and other media resources, they themselves use lossy compression, so using gzip cannot get a great result. Improvement can sometimes be counterproductive.

For front-end projects, packaged js and css resources are very suitable for compression using gzip.

In this way, when the user's browser receives the gzip type resource returned by the server, it will automatically decompress it. In this way, can not only reduce bandwidth loss, but also speed up resource transmission time.

Technology stack: vue3 vite  

First download the dependencies:

cnpm install vite-plugin-compression -D

Then configure the plug-in in vite.config.js to compress the gzip file when packaging.

export default defineConfig({
	plugins: [
		viteCompression({
        filter: /.(js|css|html|json|mjs|png|jpg|jpeg|svg)$/i,  // 这些文件都要压缩
        threshold: 10240, // 文件容量大于这个值进行压缩 单位b  1b=8B  1B=1024KB
        algorithm: 'gzip', // 压缩方式
        ext: 'gz', // 后缀名
        deleteOriginFile: false, // 压缩后是否删除压缩源文件
      }),
	]
})

Next, just pack it up, as shown below after packing

 Next is to configure nginx:

##
	# Gzip Settings
	##

    #开启gzip功能
	gzip on;
	
	#开启gzip静态压缩功能
    gzip_static on;

    # 是否在http header中添加Vary: Accept-Encoding，**一定要开启,不开启读取不到.gz结尾的压缩文件**
	 gzip_vary on;
	
	#设置是否对代理服务器的响应进行压缩。
	 #gzip_proxied any;
	
	#gzip 压缩级别 1-10 
	 gzip_comp_level 6;
	
	#gzip缓存大小
	 gzip_buffers 16 8k;
	
	#gzip http版本
	 gzip_http_version 1.1;
	
	#gzip 压缩类型
	 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Be sure to set gzip_vary on; otherwise, the files imported by the packaged html end with .js/.css, and the compressed files end with .js.gz/.css.gz, which will cause import errors! ! !

After the project is deployed and online, you can check whether the gzip setting is successful through the network.

 

If your network does not have this item, then right-click on the red box in the picture below and select Response Header ===》content-Encoding. If the word gzip is displayed, it means that the gzip configuration is successful.

In the two pictures below, one is a project where I downloaded the vite-plugin-compression compression package. The other is a project where I did not download the plug-in and package it, but both projects use Nginx.

 Found that one of the Etags starts with w,

Because we enable real-time compression when Nginx is turned on, that is to say, if the front end does not perform gzip compression and is deployed directly, then Nginx will also compress it into gzip in real time and send it to the browser. But it will consume CPU resources. In this method, the Etag attribute in the response header will have the word 'W\'

Optimization level:

Access the project after configuring gzip compression:

Before compression: