Compresser ses pages avec Maven

Afin d'améliorer la maintenabilite et la fiabilité d'un code source, il est fortement conseillé d'indenter celui-ci. Sur des sites accueillant un fort traffic, l'overhead généré par cette indentation, ainsi que les lignes blanches générées par les tags JSTL augmentent considérablement la taille des fichiers à télécharger par le client.

Afin d'optimiser au mieux les temps de chargement d'une application, il est conseillé d'effectuer une compression des fichier JSP, HTML, javascript et CSS.

La compression peut être réalisée à la volée, ou dynamiquement lors du packaging de l'application. Nous allons ici nous pencher sur la deuxième solution qui a l'avantage de ne pas surcharger la CPU du site web en production.

Pour celà nous allons utiliser deux outils très pratiques YUICompressor et HtmlCompressor.

YUICompressor permet de compresser les javascripts et les CSS. HtmlCompressor permet de compresser les pages HTML.

Voici un fichier pom minimaliste permettant de mettre en oeuvre cette compression dans un projet de type Maven 2.2.1 :

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>fr.safepic.article</groupId>
 <artifactId>demo-compress</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>Compression</name>
 <properties>
  <source.webapp>
${project.basedir}/src/main/webapp
</source.webapp>
  <tempdir.yui>
${project.build.directory}/yuicompressor
</tempdir.yui>
  <tempdir.htmlcomp>
${project.build.directory}/htmlcompressor/html
</tempdir.htmlcomp>
 </properties>
 <build>
  <plugins>
   <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.1-beta-1</version>
    <configuration>
     <webResources>
      <resource>
       <directory>${source.webapp}</directory>
       <targetPath>/</targetPath>
       <filtering>false</filtering>
       <excludes>
                <exclude>**/*.jsp</exclude>
                <exclude>**/*.html</exclude>
                <exclude>**/*.htm</exclude>
                <exclude>**/*.js</exclude>
                <exclude>**/*.css</exclude>
             </excludes>
      </resource>
      <resource>
       <directory>${tempdir.yui}</directory>
       <targetPath>/</targetPath>
       <filtering>false</filtering>
      </resource>
      <resource>
       <directory>${tempdir.htmlcomp}</directory>
       <targetPath>/</targetPath>
       <filtering>false</filtering>
      </resource>
     </webResources>
    </configuration>
   </plugin>
      <plugin>
        <groupId>com.tunyk.mvn.plugins.htmlcompressor</groupId>
        <artifactId>htmlcompressor-maven-plugin</artifactId>
        <version>1.1</version>
    <executions>
     <execution>
      <id>htmlcompressor-1</id>
      <phase>prepare-package</phase>
      <goals>
       <goal>html</goal>
      </goals>
           <configuration>
             <srcFolder>${source.webapp}</srcFolder>
             <targetFolder>${tempdir.htmlcomp}</targetFolder>
             <javascriptHtmlSprite>false</javascriptHtmlSprite>
             <compressJavaScript>true</compressJavaScript>
             <fileExt>
               <fileExt>html</fileExt>
               <fileExt>jsp</fileExt>
             </fileExt>
           </configuration>
     </execution>
    </executions>
      </plugin>
   <plugin>
    <artifactId>yuicompressor-maven-plugin</artifactId>
    <groupId>net.alchim31.maven</groupId>
    <executions>
     <execution>
      <id>yuicompressor-1</id>
      <phase>prepare-package</phase>
      <goals>
       <goal>compress</goal>
      </goals>
      <configuration>
       <nosuffix>true</nosuffix>
       <linebreakpos>1000</linebreakpos>
       <webappDirectory>${tempdir.yui}</webappDirectory>
       <warSourceDirectory>${source.webapp}</warSourceDirectory>
      </configuration>
     </execution>
    </executions>
   </plugin>
  </plugins>
 </build>
</project>

Vous pouvez télécharger un exemple de projet en cliquant ici.