Comment supprimer le css inutilisé en utilisant Google Chrome et Python (exemple avec bootstrap.min.css) ?

Exemple de comment supprimer le css inutilisé en utilisant Google Chrome et Python (exemple avec bootstrap.min.css):

Obtenir le css inutilisé avec google chrome

Google Chrome peut afficher la fraction de CSS qui n'est pas utilisée par une page Web. Pour cela, allez dans le menu:

View -> Developer -> Developer Tools

voir image ci dessous:

puis allez dans la section couverture ("coverage") et cliquez sur recharger ("reload") et commencez à capturer la couverture (voir image ci-dessous):

Chrome affichera alors la fraction de css inutilisée (par exemple avec bootstrap.min.css si le site Web utilise bootstrap).

Remarque importante: puisque javascript peut modifier le css utilisé, essayez de cliquer sur différents éléments de la page Web (par exemple un menu déroulant dans la barre de navigation). La fraction de css inutilisée peut alors diminuer un peu.

Vous pouvez ensuite télécharger un fichier chrome en cliquant sur le bouton 'Exporter ...' 'Export...' (voir image ci-dessous):

vous devriez obtenir un fichier json nommé par exemple "Coverage-20210220T191402.json" (notez que 20210220T191402 devrait être différent pour vous)

[
  {
    "url": "http://127.0.0.1:8000/Articles/How-to-create-a-list-of-numbers-in-python-/",
    "ranges": [
      {
        "start": 1031,
        "end": 1059
      },
      {
        "start": 1060,
        "end": 1102
      },
      {
        "start": 1124,
        "end": 1173
      },
.
.
.
.

Ce fichier donne des informations sur la fraction de code utilisée par la page Web.

Créez un script python qui ne conserve que le css utilisé

Vous pouvez ensuite créer un simple script python basé sur le fichier json de couverture chrome pour créer un nouveau fichier css qui ne conserve que le css utilisé (exemple avec bootstrap.min.css 4.1.3):

Remarque: pour exécuter le script vous avez besoin ici de:

• Coverage---------.json
• bootstrap.min.css

dans le même répertoire.

import json

with open('Coverage-20210220T191402.json') as json_data:
    raw_code_coverage_list = json.load(json_data)
    #print(data_dict)

file_name = 'bootstrap.min.css'

for raw_code_coverage in raw_code_coverage_list:

    # print(raw_code_coverage.keys())
    # dict_keys(['url', 'ranges', 'text'])
    #print(raw_code_coverage['url'])

    if file_name in raw_code_coverage['url']:

        #print(raw_code_coverage['url'])

        ranges_list = raw_code_coverage['ranges']

        #print(type(ranges_list))
        #print(type(ranges_list[0]))
        #print(ranges)

        code = raw_code_coverage['text']

        code_clean = ''     
        for ranges in ranges_list:
            code_clean += code[ranges['start']:ranges['end']]

f= open("bootstrap.min2.css","w+")

f.write(code_clean)

f.close()

Références

• Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
• Chrome DevTools: Export your raw Code Coverage Data
• How to Remove Unused CSS for Leaner CSS Files
• UnCSS Online!
• How Do You Remove Unused CSS From a Site?