Optimisation du téléchargement des ressources frontales (ZIP|GZIP)

Optimisation du téléchargement des ressources frontales (ZIP|GZIP)

1. Configuration Nginx

    A. Pourquoi activer la compression gzip
            car la vitesse de chargement est plus rapide et la bande passante du serveur est économisée après l'activation de la compression gzip
    B. Configuration de la compression gzip Nginx
    C. Après la configuration, nginx -t vérifie si le fichier de configuration est OK, puis redémarre nginx - s recharge
    D. Détection : l'en-tête de réponse de la ressource demandée renvoie Content-Encoding : gzip flag success

2. Configuration CDN

    A. Qu'est-ce qu'un CDN Un réseau de distribution de contenu (Content Delivery Network, CDN) est un réseau distribué qui est établi et couvert sur un réseau porteur et se compose de serveurs dans différentes régions. Les ressources du site source sont mises en cache sur des serveurs périphériques à travers le pays pour que les utilisateurs puissent les obtenir à proximité. La vitesse de chargement est rapide et efficace et la pression sur le site source est réduite.
    B. Une fois le CDN configuré, l'optimisation des performances peut être améliorée sur la base du CDN tiers
    C. Compression CDN Gzip
        1) Une fois la fonction de compression Gzip activée, le nœud CDN compresse la ressource avec Gzip et la renvoie pour réduire la taille du fichier transmis et améliorer la taille du fichier Efficacité de transmission, réduisant la consommation de bande passante.
        2) Étapes de l'opération
说明:由于CDN有很多商家都有，这里步骤只说一个阿里云的
        ① Dans la barre de navigation de gauche de la console CDN, cliquez sur "Domain Name Management", et après être entré dans la page, cliquez sur la gestion correspondant au nom de domaine cible.
        ②Dans la barre de navigation de gauche du nom de domaine spécifié, cliquez sur "Optimisation des performances", et dans la zone de compression Gzip, activez le commutateur de compression Gzip pour terminer.

3. Utilisation rationnelle du cache

    A. Le cache HTTP est le cache utilisé lors de la transmission des requêtes HTTP.À l'heure actuelle, le protocole http1.1 possède un cache qui peut être configuré dans nginx. Détection (le retour 304 est le cache, 200 est la nouvelle ressource)

协商缓存配置(合理使用，不然需要版本控制或者时间戳)
	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. Cache JS, certaines données ordinaires non mises à jour peuvent être stockées dans sesstionStorage, localStorage, cookie browser (nécessite une utilisation raisonnable)

4. Autres optimisations

    A. Optimisation de l'image, la meilleure compression peut être compressée
        1) Logiciel : Tuya - logiciel de compression d'image facile à utiliser (xinxiao.tech)
        2) Instructions de compression : si vous pouvez utiliser JPG|JPEG, utilisez le format JPG|JPEG, non importe qu'il s'agisse de JPG Essayez de ne pas être trop flou avec le taux de compression PNG
    B. Chargement de la page de transition, le loding est toujours nécessaire
    C.js et le code css doivent être optimisés