preface

As the front-end project of our team is getting bigger and bigger, coupled with the SPA first-screen loading feature of Vue, the first loading speed of the system is getting slower and slower, which may reach tens of seconds. Therefore, in order to optimize user performance experience, we choose to enable Gzip for file compression, which has achieved remarkable results.

What is Gzip?

Gzip is a compressed format for data, or a file format.

Gzip was originally used to compress files in UNIX systems, but has gradually become the most mainstream data compression format on the Internet. When the user visits our web site, the server will compress our web page files and transfer the compressed files to the client. For plain text files, we can compress to at least 40% of the original size, which greatly improves the transmission efficiency and the page can be loaded faster.

Configure the Gzip service on the Nginx server

Because we use ngXIN to deploy the front end of the project, nginx has its own HttpGzip module **, ** so we can directly configure the HTTP configuration items in the nginx.conf file. However, since Nginx processes the request itself and then compresses it back, it consumes the corresponding server memory.

Open or close # gzip module (on | off) gzip on; # Minimum number of bytes allowed to compress a page, default is 0, no matter how large the page is compressed. You are advised to set the value to a value larger than 1K. If the value is smaller than 1K, the value may become larger. Set the system to obtain several units of cache for storing gzip's compressed result data stream. For example, 4 4K indicates that the memory size is four times the original data size in 4K. gzip_buffers 4 16k; Identify the protocol version of HTTP. Since some early browsers or HTTP clients may not support gzip self-extracting, the user will see garbled characters, so some judgment is necessary. # gzip_http_version 1.0; # gzip compression ratio, 1 compression ratio minimum processing speed, 9 compression ratio maximum processing speed (fast but CPU consumption). gzip_comp_level 2; The "text/ HTML "type is always compressed (whether specified or not). gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; Add gzip_vary off to the proxy server; Gzip_disable "MSIE [1-6]\."Copy the code

The test results

  • Before open the gzip

  • After open the gzip

Client compresses Gzip

We should minimize the use of server memory, after all, the server-side resource is very precious, here we are still using nginx front deployment, we are on the client side for nginx process compressed file operations in this step, can directly use nginx we compressed file, here is a vue – based cli configuration the front end of the project.

1. Install the plug-in

It is best to install a lower version here to prevent errors.

NPM install [email protected] - DCopy the code

2. Configure vue.config.js to register plug-ins

The webPack plugin can be registered according to your configuration.

const CompressionPlugin = require("compression-webpack-plugin");
module.export = {
	configureWebpack: {
 		plugins: [
      new CompressionPlugin({
        filename: "[path].gz".// Compression algorithm
        algorithm: "gzip".// Match the file
        test: /\.js$|\.css$|\.html$/.// Compress files larger than this size, in bytes
        threshold: 10240.minRatio: 0.8.// Delete the original file and keep only the compressed file
        deleteOriginalAssets: false}}})]Copy the code

3. Run the package command

After successfully running, you can see the.gz ending file in the package file, upload the package file to the specified nginx folder.

npm run build
Copy the code

4. Configure nginx

The http_gzip_STATIC_module plugin for nginx is required. It is not possible to install nginx using yum. Here the catalogue can be based on your personal situation **. * * to install nginx

cd /usr/localhttp://nginx.org/download/nginx-1.18.0.tar.gz/SRC/wget tar ZXVF nginx - 1.18.0. Tar. GzcdNginx - 1.18.0 /. / configure -- prefix = / usr /local/nginx --with-http_gzip_static_module
make && make install
Copy the code

Modify the nginx. Conf

cd /usr/local/nginx/conf/
vim nginx.conf
Copy the code
server { listen 80; server_name localhost; location / { root html; index index.html index.htm; try_files $uri $uri/ /index.html; gzip_static on; Static compression}}Copy the code

Start the nginx service

cd /usr/local/nginx/sbin
./nginx
Copy the code

5. Test effect

Here we only have.gz files in the server js folder (the other files have been deleted), but the client successfully reads them.





contrast

Both server-side and client-side gzip compression, we have greatly reduced the size of the file, bringing a better user experience. The advantage of server-side processing of Gzip is that it requires only configuration and no complex operations, but the disadvantage is that it consumes server memory. The advantage of gzip processing on the client side is that the server does not need to compress files, which reduces the server memory consumption. However, the configuration of gzip on the client side is more complicated than that on the server side.

Reference documentation

What is GZIP? What are the advantages of GZIP? How to start GZIP? Enable Gzip compression in vuE-CLI4 development projects to optimize the package size and improve the loading speed. Nginx gzip static Static compression configuration Nginx uses gz compressed files generated by Webpack instead of Nginx compression