web-dev-qa-db-fra.com

Optimisation - Existe-t-il un moyen de rechercher et de supprimer les fichiers CSS et Javascript non utilisés communs à toutes les pages html?

Mon site Web contient de nombreuses pages Web et j'essaie de nettoyer mes feuilles de style et mes scripts. Environ 10% ou plus de chaque fichier js/css ne sont utilisés par aucune des pages HTML de mon site Web. Ce dont j'ai besoin, c’est de supprimer les fichiers CSS et js non utilisés et redondants. J'ai fait un peu de recherche et trouvé ceci . Mais ce n'est pas gratuit.
REMARQUE: 

  • Certains des fichiers js/css sont appelés par plusieurs pages HTML, mais une partie de chaque fichier js/css n’est utilisée par aucune des pages HTML qui les appelle.
  • Mon site Web est uniquement compatible avec Chrome.
javascripthtmlcssoptimizationcode-cleanup
24
HackCode

Ouais, vous devriez utiliser le plugin grunt-uncss de Addy Osmani pour nettoyer les CSS non utilisées. Je ne sais pas si vous pouvez utiliser un outil pour supprimer JS non utilisé, car cela dépend de la logique de l'application, quelle partie du code JS sera appelée.

10
codeepic

Open chrome DevTools , sous Audits vous pouvez auditer l'état actuel ou recharger la page et auditer lors du chargement

Puis sous Performance de la page Web , une section indique: "Supprimer les règles CSS inutilisées

Maintenant, quand je l'ai utilisé, j'ai vu qu'il listait des CSS que j'utilisais. Le problème était dans l'état actuel. actuellement appliqué.

BTW si cela ne se présente pas pour autant que je sache, cela fonctionne en chrome Canary. De plus, je ne me souviens pas si j'ai activé un drapeau pour cela. (Je ne pense pas)

6
Edwin Reynoso

Vous pouvez utiliser GTmetrix pour nettoyer le code CSS à l’adresse http://gtmetrix.com/remove-unused-css.html . Donnez l'URL et appuyez sur GO! 

http://www.peterbe.com/plog/mincss est un outil qui, lorsqu'il reçoit une URL (ou plusieurs URL), télécharge cette page et tous ses CSS, compare chaque sélecteur de CSS et découvre lequel ceux ne sont pas utilisés. Le résultat est une copie du CSS original, mais les sélecteurs ne se trouvant pas dans le ou les documents ont été supprimés. 

vous pouvez également utiliser l'outil d'audit Google Chrome, consultez ce site Web http://blackbe.lt/removing-unused-css-selectors-with-google-chrome-tool/

ou vous pouvez utiliser les extensions Google Chrome

  1. https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnngeik
  2. https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=fr
3
Zain Aftab

Tout d'abord, il existe des solutions complètes, dont certaines sont probablement déjà référencées dans SO, mais je ne les connais pas, et beaucoup risquent de coûter de l'argent. Si j'étais vous, je commencerais par chercher les mots clés "nettoyer css lint" et "nettoyer le javascript" ou quelque chose de similaire. Je n'irais pas écrire mon propre code à cette fin. 

Maintenant, si je n'étais pas vous ou après quelques heures de recherche, je n'avais encore rien trouvé qui réponde à mes besoins, je pourrais décider de l'essayer moi-même. Ce que vous pouvez faire si vous êtes prêt à vous salir, au moins pour le CSS, est d’exécuter un script localement pour exécuter chaque fichier HTML servi et

  1. Extraire toutes les feuilles de style référencées de chacune d’elles en créant une liste
  2. Extrayez les noms de toutes les classes et ids CSS de chacune d’elles en créant une liste
  3. Faire correspondre la liste avec les classes et les identifiants réellement utilisés dans le code HTML
  4. Faites une liste de tous ceux qui ne le sont pas et stockez-la dans un fichier pour un accès facile

Vous pouvez lancer quelque chose comme cela ensemble en Python dans peut-être quelques heures si vous le connaissez bien. Bien sûr, cela dépend de la langue utilisée pour les scripts rapides et sales.

L'analyse des fichiers javascript serait un peu plus difficile, à cause des problèmes de logique. Vous pouvez faire quelque chose de similaire, mais il ne serait peut-être pas dans votre intérêt d'écrire votre propre interprète javascript afin de nettoyer quelques fonctions inutilisées. Oui, vous le codez, mais vous réinventez la roue. Il pourrait en fait être une bonne idée d’examiner les IDE intégrant cette fonctionnalité. Certains sont gratuits et, plus important encore, vous n'avez pas à les écrire vous-même.

3
TheEnvironmentalist

Helium CSS est un outil javascript permettant de découvrir les CSS inutilisés sur de nombreuses pages d'un site Web. Vous devez d’abord installer le fichier javascript sur la page que vous souhaitez tester. Ensuite, vous devez appeler une fonction à l'hélium pour lancer le nettoyage.

CSSESS est un bookmarklet qui vous aide à trouver des sélecteurs CSS inutilisés sur n’importe quel site. Cet outil est assez facile à utiliser, mais il ne vous permet pas de configurer et de télécharger des fichiers CSS propres. Il ne listera que les fichiers CSS non utilisés.

1
rJ7

Vous pouvez utiliser le lien de mention ci-dessous et nettoyer votre code html et css.

http://validator.w3.org/#validate_by_uri+with_options

0
user1584418

Vous connaissez bien votre code, mais cela devrait vous aider à faire tout le travail que vous venez de lire. Nettoyage de printemps non utilisé CSS avec Grunt, Gulp, Broccoli ou Brunch

0
Willie Mwewa