cestpasdur.com Tutoriaux et ressources du web

Gérer la minification de vos javascript avec le maven-javascript-plugin

Introduction

La minification d'un fichier consiste à supprimer les espaces inutiles, les commentaires et les retour à la ligne.
A titre d'exemple, le framework jquery non minifié fait 157Ko et une fois réduit, il n'en fait plus que 23Ko , la taille est pratiquement divisée par 7.
Le principal inconvénient est de rendre les fichiers plus difficiles par un humain. Dans cet article, je vais vous présenter une façon d'activer et désactiver cette minification sur les fichiers Javascript et CSS d'un projet web java.

maven-javascript-plugin

Ce plugin maven est utilisé par le framework Richfaces pour compresser les différentes librairies qui le composent (proptotype, scriptaculous) ainsi que ses propres fonctions internes. Ce plugin  (parmi d'autres) est packagé avec le framework Richfaces. Ce plugin est basé sur YUI compressor.

Vous devez donc référencer le repository jboss http://repository.jboss.com/maven2/ pour pouvoir récupérer ce plugin. Ajouter les lignes suivantes dans votre pom :

<plugin>
	<groupId>org.richfaces.cdk</groupId>
	<artifactId>maven-javascript-plugin</artifactId>
	<version>3.3.CR1</version>
</plugin>

Ci dessous un exemple de projet :

Ce projet contient 2 fichiers javascript.
Nous allons configurer le plugin maven pour qu'il regroupe en un seul les fichiers JS.

<outputDirectory>${basedir}/src/main/webapp/js/</outputDirectory>
                    <aggregations>
                        <aggregation>
                            <includes>
                                <!-- liste des fichiers a ajouter au fichier final javascript -->
                                <include>${project.build.directory}/${project.build.finalName}/js/1-min.js</include>
                                <include>${project.build.directory}/${project.build.finalName}/js/2-min.js</include>
                            </includes>
                            <!-- fichier unique  -->
                            <output>${basedir}/src/main/webapp/js/all.js</output>
                        </aggregation>
                    </aggregations>
                    <excludes>
                        <exclude>**/all.js</exclude>
                    </excludes>
                </configuration>

Tous les fichiers javascript se trouvant dans la webapp vont être minifiés à l'exception de ceux indiqués dans les exclusions du plugin (ici all.js car celui ci contiendra l'aggregation de nos fichiers javascripts minifiés).
Ensuite on configure les aggregations, on indique alors que notre fichier all.js contiendra en fait 1-min.js et 2-min.js

Pour lancer la compression des fichiers javascripts il suffira ensuite de lancer le goal suivant :

mvn javascript:compress

Notez que vous lancer ce goal a chaque fois que vous voudrez minifier vos fichiers javascript. Vous pouvez aussi automatisez cette tache, de manière à ce que celle-ci à chaque clean install du projet

Pour cela il faut ajouter les lignes suivantes :

 <executions>
                    <execution>
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>

Ce qui au final donnera la configuration suivante :

 <build>
<plugins>
...
 <plugin>
                <groupId>org.richfaces.cdk</groupId>
                <artifactId>maven-javascript-plugin</artifactId>
                <version>3.3.3-CR1</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>

                    <outputDirectory>${basedir}/src/main/webapp/js/</outputDirectory>

                    <aggregations>
                        <aggregation>
                            <includes>
                                <!-- liste des fichiers a ajouter au fichier final javascript -->
                                <include>${project.build.directory}/${project.build.finalName}/js/1-min.js</include>
                                <include>${project.build.directory}/${project.build.finalName}/js/2-min.js</include>
                            </includes>
                            <!-- fichier unique  -->
                            <output>${basedir}/src/main/webapp/js/all.js</output>
                        </aggregation>
                    </aggregations>

                    <excludes>
                        <exclude>**/all.js</exclude>
                    </excludes>
                </configuration>
            </plugin>
</plugins>
</build>

De plus, si votre projet web est un projet JSF2, vous pouvez référencer ou non les fichiers minifiés, en les liant au projectStage
Developpement = fichiers non minifiés
Production = fichiers minifiés