Front-end resource download optimization (ZIP|GZIP)

1. Nginx configuration

    A. Why enable gzip compression
            because the loading speed is faster and server bandwidth is saved after gzip compression is enabled.
    B. Nginx gzip compression configuration
    C. After configuration, nginx -t checks whether the configuration file is OK, and then restarts nginx -s reload
    D. Detection: The response header of the requested resource returns Content-Encoding: gzip flag success
Content-Encoding: gzip logo

2. CDN configuration

    A. What is a CDN? A content delivery network (Content Delivery Network, CDN) is a distributed network that is established and covered on a bearer network and consists of servers in different regions. The source site resources are cached to edge servers across the country for users to obtain nearby. The loading speed is fast and efficient and the pressure on the source site is reduced.
    B. After the CDN is configured, performance optimization can be improved on the basis of the third-party CDN.
    C. CDN Gzip compression
        1). After the Gzip compression function is enabled, the CDN node will compress the resource with Gzip and return it to reduce the size of the transmitted file and improve the file size. Transmission efficiency, reducing bandwidth consumption.
        2) Operation steps
说明:由于CDN有很多商家都有，这里步骤只说一个阿里云的
        ① In the left navigation bar of the CDN console, click "Domain Name Management", and after entering the page, click the management corresponding to the target domain name.
        ②In the left navigation bar of the specified domain name, click "Performance Optimization", and in the Gzip compression area box, turn on the Gzip compression switch to complete.

3. Rational use of cache

A. HTTP cache is the cache used during HTTP request transmission. At present, basically the http1.1 protocol has a cache, which can be configured in nginx. Detection (return 304 is cache, 200 is new resource)

协商缓存配置(合理使用，不然需要版本控制或者时间戳)
	location / {
    
    
 				 # 其它配置
  					...
  				if ($request_uri ~* .*[.](js|css|map|jpg|png|svg|ico)$) {
    
    
   					 #非html缓存1个月
    				add_header Cache-Control "public, max-age=2592000";
  				}
  				if ($request_filename ~* ^.*[.](html|htm)$) {
    
    
    				#html文件使用协商缓存
   					 add_header Cache-Control "public, no-cache";
  				}
}

B. JS cache, some ordinary non-updated data can be stored in sesstionStorage, localStorage, cookie browser (requires reasonable use)

4. Other optimizations

    A. Picture optimization, the best compression can be compressed
        1) Software: Tuya - easy-to-use picture compression software (xinxiao.tech)
        2) Compression instructions: If you can use JPG|JPEG, use JPG|JPEG format, no matter it is JPG Try not to be too blurry with the PNG compression ratio
    B. Loading the transitional page, loding is still required
    C.js and css code should be optimized