一种Java Web程序资源的优化方法

种Java Web程序资源的优化方法

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

要怎样组织和优化CSS和脚本文件资源？

很多CSS和JavaScript资源分散在不同的文件中，可能对网页的载入速度有影响。

WRO4J是一个很有用的API，可以最小化和压缩Web资源文件，包括CSS和JavaScript文件。WRO4J可以在建立时进行配置——使用适当的Maven插件，也可以在运行时通过过滤器进行配置。



本文讲述怎样在构建应用程序时，配置和使用WRO4J。

第一步是需要定义分组——创建和包含的资源，这通过创建wro.xml配置文件实现，此文件放入WEB-INF目录。如下：

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <groups xmlns="http://www.isdc.ro/wro">  
3.   <group name="javaonly-base-scripts">  
4.     <js minimize="false">/scripts/jquery-1.6.1.min.js</js>  
5.     <js minimize="false">/scripts/jqXMLUtils.pack.js</js>  
6.     <js minimize="false">/scripts/cufon/cufon-yui.js</js>  
7.     <js minimize="false">/scripts/cufon/font.js</js>  
8.     <js minimize="false">/scripts/cufon/replace.js</js>  
9.   </group>  
10.   <group name="javaonly-scripts">  
11.     <js>/scripts/scriptFile1.js</js>  
12.     <js>/scripts/scriptFile2.js</js>    
13.   </group>  
14.   <group name="javaonly-debugging">  
15.     <js minimize="false">/scripts/scriptDebug1.js</js>  
16.     <js minimize="false">/scripts/scriptDebug1.js</js>  
17.   </group>  
18.     
19.   <group name="javaonly-styles">  
20.     <css>/styles/screen/base.css</css>  
21.     <css>/styles/screen/layout.css</css>  
22.     <css>/styles/screen/content.css</css>  
23.     <css>/styles/screen/menu.css</css>  
24.     <css>/styles/screen/footer.css</css>  
25.     <css>/styles/screen/login.css</css>  
26.     <css>/styles/screen/tooltip.css</css>   
27.     <css>/styles/screen/homepage.css</css>  
28.       
29.   </group>  
30. </groups>  
31. </pre>  

随后，我们在Maven配置文件中添加WRO4J插件。如下：

[html]  view plain copy print ?

1. <plugin>  
2.     <groupId>ro.isdc.wro4j</groupId>  
3.     <artifactId>wro4j-maven-plugin</artifactId>  
4.     <version>${wro4j.version}</version>  
5.     <executions>  
6.         <execution>  
7.             <id>optimize-web-resources</id>  
8.             <phase>compile</phase>  
9.             <goals>  
10.                 <goal>run</goal>  
11.             </goals>  
12.         </execution>  
13.     </executions>  
14.     <configuration>  
15.         <ignoreMissingResources>false</ignoreMissingResources>  
16.         <jsDestinationFolder>  
17.             ${project.build.directory}/${project.build.finalName}/scripts/wro/  
18.         </jsDestinationFolder>  
19.         <cssDestinationFolder>  
20.             ${project.build.directory}/${project.build.finalName}/styles/wro/  
21.         </cssDestinationFolder>  
22.         <wroManagerFactory>  
23.             ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory  
24.         </wroManagerFactory>  
25.     </configuration>                
26. </plugin>  

最后，我们在网页上添加最小化后的资源文件，如下：

[html]  view plain copy print ?

1. <link rel="stylesheet" type="text/css" href="/wro/javaonly-styles.css" />  
2. <script type="text/javascript" src="/wro/javaonly-base-scripts.js"></script>  

WRO4J的主页：http://code.google.com/p/wro4j/wiki/GettingStarted