Compresser les fichiers html, css et js

Comment diminuer la taille des fichiers html, css et js ?

24 novembre 2014

Rappels

html est un langage informatique qui permet de structurer le contenu des pages web. Il est le fond.

css est un langage informatique qui permet de formater l'affichage des documents html. Il est la forme.

js ou javascript est un langage informatique principalement employé dans les pages web interactives.

grunt est un outil libre qui permet d'automatiser des tâches répétitives, par exemple, diminuer la taille des fichiers html, css et js.

Exemple d'utilisation

Nous avons utilisé cette méthode pour diminuer l'utilisation de la bande passante dans notre projet lyon.glicer.com et en accélérer son téléchargement.

Cette méthode permet également de rendre difficilement compréhensible le code javascript.

Pré-requis

node.js doit être installé, ce logiciel libre permet d'exécuter du javascript côté serveur, il est nécessaire au fonctionnement de grunt.

Installer grunt-cli

grunt-cli est l'interface de commande.

grunt-cli permet d'exécuter la version de grunt qui a été configurée dans un fichier gruntfile.js. Ceci permet d'utiliser différentes versions de grunt installées sur une même machine.

En mode administrateur, exécuter la ligne de commande ci-dessous :

npm install -g grunt-cli

Cela affiche :

C:\Users\GLICER\AppData\Roaming\npm\grunt -> C:\Users\GLICER\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\GLICER\AppData\Roaming\npm\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

Préparer un nouveau projet grunt

grunt a besoin d'un fichier package.json et d'un fichier gruntfile.js qui doivent être situés dans le même répertoire.

package.json : Contient la liste des composants grunt nécessaires.

gruntfile.js : Contient la liste des tâches à exécuter.

Nos fichiers sont organisés comme ci-dessous :

├───gruntproject
│       gruntfile.js
│       package.json

└───src
    │   asiatique.html
    │   aujourdhui.html
    │   boire.html
    │   evenement.html
    │   francais.html
    │   monde.html
    │   rapide.html

    ├───css
    │       getter.css

    └───js
            getter.js

package.json

Dans notre cas nous avons besoin des composants suivants :

{
    "name": "nom-du-projet",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-htmlmin": "~0.2.0",
        "grunt-contrib-cssmin": "~0.7.0",
        "grunt-contrib-uglify": "~0.3.0"
    }
}

gruntfile.js

Nous devons configurer les options des différents composants.

module.exports = function (grunt)
{
    // Configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        htmlmin: {
            dist: {
                options: {
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: [{
                    expand: true,
                    cwd: '../src/', //répertoire des fichiers html à compresser
                    src: '**/*.html', //tous les fichier html dans tous les sous-répertoires
                    dest: '../build/' //répertoire des fichiers html compressés
                }]
            }
        },
        cssmin: {
            compress: {
                options: {
                    keepSpecialComments: '*'
                },
                src: '../src/css/getter.css', //fichier css à compresser
                dest: '../build/css/getter.min.css' //fichier css compressé
            }
        },
        uglify: {
            dist: {
                src: '../src/js/getter.js', //fichier js à compresser
                dest: '../build/js/getter.min.js' //fichier js compressé
            }
        }
    });

    // Charge les composants nécessaires
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Tâches à exécuter par défaut
    grunt.registerTask('default', ['htmlmin', 'cssmin', 'uglify']);
};

Installer les composants

En mode administrateur, depuis le même répertoire que le fichier package.json, exécuter la ligne de commande ci-dessous :

npm install

Cela affiche :

npm WARN package.json nom-du-projet@0.1.0 No description
npm WARN package.json nom-du-projet@0.1.0 No repository field.
npm WARN package.json nom-du-projet@0.1.0 No README data
grunt-contrib-htmlmin@0.2.0 node_modules\grunt-contrib-htmlmin
├── each-async@0.1.3
├── pretty-bytes@0.1.2
├── html-minifier@0.5.6
└── chalk@0.4.0 (ansi-styles@1.0.0, has-color@0.1.7, strip-ansi@0.1.1)

grunt-contrib-cssmin@0.7.0 node_modules\grunt-contrib-cssmin
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── clean-css@2.0.8 (commander@2.0.0)

grunt@0.4.5 node_modules\grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.14
├── colors@0.6.2
├── getobject@0.1.0
├── rimraf@2.2.8
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.5)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── lodash@0.9.2
├── underscore.string@2.2.1
├── coffee-script@1.3.3
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

grunt-contrib-uglify@0.3.3 node_modules\grunt-contrib-uglify
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── uglify-js@2.4.15 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)

Exécuter les tâches

Depuis le même répertoire que gruntfile.js, exécuter la ligne de commande ci-dessous :

grunt

Cela affiche :

Running "htmlmin:dist" (htmlmin) task
Minified ../build/asiatique.html 41.18 kB → 23.31 kB
Minified ../build/aujourdhui.html 59.06 kB → 33.38 kB
Minified ../build/boire.html 35.94 kB → 21.14 kB
Minified ../build/evenement.html 56.67 kB → 31.75 kB
Minified ../build/francais.html 78.73 kB → 43.24 kB
Minified ../build/monde.html 33.25 kB → 19.86 kB
Minified ../build/rapide.html 71.44 kB → 40.06 kB

Running "cssmin:compress" (cssmin) task
File ../build/css/getter.min.css created.

Running "uglify:dist" (uglify) task
File ../build/js/getter.min.js created.

Done, without errors.

ou en spécifiant le chemin du fichier gruntfile.js :

grunt --gruntfile gruntproject/gruntfile.js

Analyse des résultats

TypeTaille originaleTaille compresséeGain
html378 Ko214 Ko43 %
css149 Ko121 Ko18 %
js576 Ko264 Ko54 %

Arborescence finale

├───build
│   │   asiatique.html
│   │   aujourdhui.html
│   │   boire.html
│   │   evenement.html
│   │   francais.html
│   │   monde.html
│   │   rapide.html
│   │
│   ├───css
│   │       getter.min.css
│   │
│   └───js
│           getter.min.js

├───gruntproject
│   │   gruntfile.js
│   │   package.json
│   │
│   └───node_modules
│       ├───grunt
│       ├───grunt-contrib-cssmin
│       ├───grunt-contrib-htmlmin
│       └───grunt-contrib-uglify
└───src
    │   asiatique.html
    │   aujourdhui.html
    │   boire.html
    │   evenement.html
    │   francais.html
    │   monde.html
    │   rapide.html

    ├───css
    │       getter.css

    └───js
            getter.js

Versions des logiciels et langages utilisés