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

Active 24 février 2021    /    Viewed 655    /    Comments 0    /    Edit


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:

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

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

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

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):

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

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


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!