Résoudre les problèmes de dossier de cache volumineux causés par les Inline JS dynamiques

Si le dossier cache/min devient trop gros en raison d'un nombre anormalement élevé de fichiers JS, cela peut causer des problèmes :

• Ça prendra trop de quota disque dans votre hébergement
• Trop de fichiers signifie que parfois les anciens ne seront pas complètement supprimés.

Lorsque le nombre de fichiers JS est trop important, c'est généralement lié au JavaScript Inline dynamiques sur votre site. Depuis WP Rocket 3.1, lorsque l'option Combiner les fichiers JS est activée, les scripts JS inline sont également optimisés en les incluant dans le fichier JS combiné.

Qu'est-ce qu’un "JS Inline dynamique" ?

Dans ce contexte, "dynamique" signifie un contenu qui varie d'une page à l'autre. JS Inline dynamique signifie que le même script se trouve sur plusieurs pages de votre site, mais qu'une petite partie de celui-ci change de page en page.  Cela entraînera la création d'un nouveau fichier JS combiné pour chaque page. Sur un site avec beaucoup de pages, cela va rapidement créer trop de fichiers JS.

Voici un exemple d'une partie d'un script inline :

ga('ec:addProduct', {
       'id': '3DH048',
       'name': '3D Uruguay Hat',
       'category': 'Countries/South America/Uruguay/All Products/Hats/3D Hats/World Cup/Uruguay',
       'price': '7.99',
   });

Comment trouver ce JS inline à exclure ?

Pour identifier quels scripts sont dynamiques, nous devons comparer 2 des fichiers JS combinés créés par WP Rocket, et trouver leurs différences. Cela nous amènera au(x) script(s) à exclure.

1. Activez WP Rocket avec l'option Combiner les fichiers JS activée.
2. Ouvrez deux pages du même type de contenu sur le site Web, par exemple deux posts de blog ou deux produits.
3. Affichez le code source de votre page et localisez le fichier JS combiné créé par WP Rocket. Ce sera vers le bas de la page source, et l'URL aura ce format :  /cache/min/1/734613487895454.js  Voici un exemple :
Astuce : Faites une “Recherche” (Mac : Command + F / PC : CTRL+F) avec  cache/min , ou   .js pour affiner votre recherche.
4. Vérifiez si les fichiers .js combinés sont différents en regardant les noms de fichiers.  Si les noms de fichiers sont différents, il y a un problème.
5. Ensuite, nous allons comparer ces deux fichiers pour trouver la ou les différences. Comme le code est minifié, il est difficile à lire, donc nous allons d'abord déminifier le code. Vous pouvez le faire grâce à : unminify.com
   • Cliquez sur le fichier JS de la page source
   • Sélectionnez tout le contenu de ce JS (Mac : Command +A / PC : CTRL+A),  et copiez ensuite son contenu
   • Collez ce contenu dans unminify.com, puis cliquez sur Unminify.
6. Ouvrez un nouvel onglet du navigateur et allez sur DiffChecker.com. Collez le contenu non minifié dans le champ Texte original sur le côté gauche.
7. Répétez l'étape 5 pour la deuxième page que vous avez ouverte à l'étape 2. Ensuite, prenez le contenu non minifié et collez-le dans le champ de texte Modifié sur le côté droit dans Diffchecker :

8. Cliquez sur le bouton  Find Difference. Attendez une minute environ que la différence soit traitée. Vous verrez alors une comparaison côte à côte du code avec les modifications mises en évidence. Cliquez sur les barres rouges/vertes à droite pour passer directement aux parties du code qui différent. Les changements seront mis en évidence dans une nuance plus foncée de rouge/vert. Maintenant, vous devriez être en mesure de voir les parties spécifiques du code qui sont différentes : 

9. Dans cet exemple, il y a une longue chaîne de chiffres/lettres qui est différente sur chaque page. C'est probablement unique à chaque page et c'est là le problème.
10. Ensuite nous devons choisir une chaîne de caractères qui exclura le script dans WP Rocket. Ça doit être quelque chose d’unique et de propre à ce script et qui sera présent dans chaque cas. Dans cet exemple, un bon candidat pour identifier ce script serait : ct_input_name
11. Entrez cela dans l'option deWP Rocket : JavaScript inline exclu

Après avoir effectué vos exclusions, surveillez le dossier cache pour vérifier que le problème a été résolu. Si le problème persiste, vous devriez répéter le processus, mais comparer un autre type de contenu sur votre site. Par exemple, si vous avez d'abord comparé les articles de blog, essayez de comparer les produits. Il peut y avoir différents JS inclus sur différents types de contenu.

S'il y avait déjà trop de fichiers JS dans le dossier min pour que votre serveur les supprime automatiquement, vous devrez peut-être les supprimer manuellement via FTP. Une fois que les bonnes exclusions ont été faites, les fichiers seront supprimés comme d'habitude, automatiquement.