PrimeFaces compress and combine JavaScript and CSS
In this tutorial, we will show you how to use PrimeFaces extensions – Maven plugin, to compress and combine JavaScript and CSS files, a web resources optimization example, to make web site load faster.
Tool tested :
- PrimeFaces 3.3
- PrimeFaces-Extensions 0.5
- Maven 3.0.3
This guide is example-driven, for detail explanation and all other plugin tags and options, please visit this excellent guide – PrimeFaces – Getting Started Closure Compiler.
1. Project Structure
See following project structure. It consists of 3 CSS files, and 2 JavaScript files. Later we will compress n combine these files.
2. Copy Resources
First, uses maven-resources-plugin
to copy all resources (js and css) to “target” folder, but bootstrap-dropdown.js
will be excluded.
<properties>
<project.theme.name>default</project.theme.name>
<project.resources.home.folder>
${project.basedir}/src/main/webapp/resources/${project.theme.name}/
</project.resources.home.folder>
<project.resources.build.folder>
${project.build.directory}/temp-resources/${project.theme.name}/
</project.resources.build.folder>
</properties>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.5</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>generate-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${project.resources.build.folder}/</outputDirectory>
<resources>
<resource>
<directory>${project.resources.home.folder}</directory>
<filtering>true</filtering>
<includes>
<include>**/*.css</include>
<include>**/*.js</include>
</includes>
<excludes>
<exclude>**/bootstrap*.js</exclude>
</excludes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
3. Compress and Combine
Define resources-optimizer-maven-plugin
to compress and combine those resources into a single file. And copy back to the “source” folder.
<plugin>
<groupId>org.primefaces.extensions</groupId>
<artifactId>resources-optimizer-maven-plugin</artifactId>
<version>0.5</version>
<executions>
<execution>
<id>optimize</id>
<phase>prepare-package</phase>
<goals>
<goal>optimize</goal>
</goals>
</execution>
</executions>
<configuration>
<warningLevel>QUIET</warningLevel>
<suffix>-min</suffix>
<failOnWarning>false</failOnWarning>
<resourcesSets>
<resourcesSet>
<inputDir>${project.resources.build.folder}/css/</inputDir>
<includes>
<include>**/*.css</include>
</includes>
<aggregations>
<aggregation>
<removeIncluded>false</removeIncluded>
<outputFile>
${project.resources.home.folder}/css/${project.artifactId}.aggr.css
</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
<resourcesSet>
<inputDir>${project.resources.build.folder}/js/</inputDir>
<includes>
<include>**/*.js</include>
</includes>
<aggregations>
<aggregation>
<removeIncluded>false</removeIncluded>
<outputFile>
${project.resources.home.folder}/js/${project.artifactId}.aggr.js
</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
</resourcesSets>
</configuration>
</plugin>
In this build, 3 CSS files will be compress or minimize and combine into a projectname.aggr.css
, and JavsScript files into projectname.aggr.js
4. Cleaning
Before build, remember clean the resources like “target” folder and previous “.aggr” files, to avoid duplicated content.
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>2.2</version>
<executions>
<execution>
<id>auto-clean</id>
<phase>generate-resources</phase>
<goals>
<goal>clean</goal>
</goals>
<configuration>
<filesets>
<fileset>
<directory>${project.resources.home.folder}</directory>
<includes>
<include>**/*.aggr.css</include>
<include>**/*.aggr.js</include>
</includes>
</fileset>
</filesets>
</configuration>
</execution>
</executions>
</plugin>
5. Build It
Done, uses command mvn prepare-package
to start the compress and combine process.
This site certainly has all of the info I needed about this subject
and didn’t know who to ask.
Hi, this worked perfectly for me. Thanks a lot for writing it in a easy to understand way. I have a question. Isn’t it easier to compress CSS and JS files in a online compressor (like this one: http://www.giftofspeed.com/javascript-compressor/ or this one: http://iceyboard.no-ip.org/projects/css_compressor ) ?? It seems that often I only have a few of those files and it takes me about 2 minutes to compress and re-upload them. What are your thoughts on this? Thanks!
Hi mkyong,
Thanks for the tutorial.
It works and the compressed js and css files got generated in main resource folders.
whether i need to change the js and css paths in all xhtml files to this compressed files[.aggr].
Early response from you will be much helpful. Thanks.