TOC

Minification des actifs JS et CSS avec Maven

Minification des actifs JS et CSS avec Maven

1. Vue d'ensemble

Cet article explique comment réduire au minimum les ressources Javascript et CSS en tant qu’étape de construction et servir les fichiers résultants avec Spring MVC.

Nous utiliseronsYUI Compressor comme bibliothèque de minification sous-jacente etYUI Compressor Maven plugin pour l'intégrer dans notre processus de construction.

2. Configuration du plugin Maven

Tout d'abord, nous devons déclarer que nous utiliserons le plugin de compresseur dans notre fichierpom.xml et exécuterons l'objectifcompress. Cela compressera tous les fichiers.js et.css soussrc/main/webapp de sorte quefoo.js sera minifié enfoo-min.js etmyCss.css sera minifié enmyCss-min.css: 


   net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress

Notresrc/main/webapp directory contient les fichiers suivants: 

js/
├── foo.js
├── jquery-1.11.1.min.js
resources/
└── myCss.css

Après avoir exécutémvn clean package, le fichier WAR généré contiendra les fichiers suivants: 

js/
├── foo.js
├── foo-min.js
├── jquery-1.11.1.min.js
├── jquery-1.11.1.min-min.js
resources/
├── myCss.css
└── myCss-min.css

3. Garder les mêmes noms de fichiers

A ce stade, lorsque nous exécutonsmvn clean package,foo-min.js etmyCss-min.css sont créés par le plugin. Puisque nous avons utilisé à l'originefoo.js etmyCss.css pour faire référence aux fichiers, notre page utilisera toujours les fichiers originaux non minifiés, car les fichiers minifiés ont des noms différents de l'original.

Afin d'éviter d'avoir à la foisfoo.js/foo-min.js etmyCss.css/myCss-min.css et d'avoir les fichiers minifiés sans changer leurs noms, nous devons configurer le plugin avec l'optionnosuffix comme suit: 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true

Maintenant, lorsque nous exécuteronsmvn clean package, nous aurons les fichiers suivants dans le fichier WAR généré: 

js/
├── foo.js
├── jquery-1.11.1.min.js
resources/
└── myCss.css

4. Configuration du plug-in WAR

Garder les mêmes noms de fichiers a un effet secondaire. Cela oblige le plugin WAR à écraser les fichiers minifiésfoo.js etmyCss.css par les fichiers d'origine, nous n'avons donc pas les versions minifiées des fichiers dans la sortie finale. Le fichierfoo.js contient les lignes suivantes avant la minification: 

function testing() {
    alert("Testing");
}

Lorsque nous examinons le contenu du fichierfoo.js dans le fichier WAR généré, nous voyons qu'il a le contenu d'origine au lieu du contenu minifié. Pour résoudre ce problème, nous devons spécifier unwebappDirectory pour le plugin de compresseur et le référencer depuis la configuration du plugin WAR. 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true
        ${project.build.directory}/min
    


maven-war-plugin

    
        
            ${project.build.directory}/min

Ici, nous avons spécifié le répertoiremin comme répertoire de sortie pour les fichiers minifiés et configuré le plugin WAR pour l'inclure dans la sortie finale.

Nous avons maintenant les fichiers minifiés dans le fichier WAR généré, avec leurs noms de fichiers d'originefoo.js etmyCss.css..Nous pouvons vérifierfoo.js pour voir qu'il contient maintenant le contenu minifié suivant: 

function testing(){alert("Testing")};

5. Exclusion de fichiers déjà réduits

Il est possible que des versions minifiées soient disponibles au téléchargement dans les bibliothèques Javascript et CSS tierces. Si vous en utilisez un dans votre projet, vous n’avez pas besoin de les traiter à nouveau.

L'inclusion de fichiers déjà minifiés génère des messages d'avertissement lors de la construction du projet.

Par exemple,jquery-1.11.1.min.js est un fichier Javascript déjà minifié et il provoque des messages d'avertissement similaires aux suivants lors de la construction: 

[WARNING] .../src/main/webapp/js/jquery-1.11.1.min.js [-1:-1]:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})
[WARNING] ...jquery-1.11.1.min.js:line -1:column -1:
Using 'eval' is not recommended. Moreover, using 'eval' reduces the level of compression!
execScript||function(b){a. ---> eval <--- .call(a,b);})

Pour exclure les fichiers déjà minifiés du processus, configurez le plugin de compresseur avec une optionexcludes comme suit: 


    net.alchim31.maven
    yuicompressor-maven-plugin
    1.5.1
    
        
            
                compress
            
        
    
    
        true
        ${project.build.directory}/min
        
            **/*.min.js

Cela exclura tous les fichiers de tous les répertoires dont les noms de fichiers se terminent parmin.js. L'exécution demvn clean package ne produit pas de messages d'avertissement pour le moment et la compilation n'essaye pas de réduire les fichiers déjà minifiés.

6. Conclusion

Dans cet article, nous avons décrit un moyen intéressant d’intégrer la minification de fichiers Javascript et CSS dans votre flux de travail Maven. Pour servir ces ressources statiques avec votre application Spring MVC, consultez notre articleServe Static Resources with Spring.

Vous pouvez trouver le code de cet article surGitHub.

Related