在extJS里提供了一个JBuilders的东东,现在开源社区里使用wro4j的不少,转一篇博文。
转自:http://blog.csdn.net/chszs
要怎样组织和优化CSS和脚本文件资源?
很多CSS和JavaScript资源分散在不同的文件中,可能对网页的载入速度有影响。
WRO4J是一个很有用的API,可以最小化和压缩Web资源文件,包括CSS和JavaScript文件。WRO4J可以在建立时进行配置——使用适当的Maven插件,也可以在运行时通过过滤器进行配置。
本文讲述怎样在构建应用程序时,配置和使用WRO4J。
第一步是需要定义分组——创建和包含的资源,这通过创建wro.xml配置文件实现,此文件放入WEB-INF目录。如下:
- <?xml version="1.0" encoding="UTF-8"?>
- <groups xmlns="http://www.isdc.ro/wro">
- <group name="javaonly-base-scripts">
- <js minimize="false">/scripts/jquery-1.6.1.min.js</js>
- <js minimize="false">/scripts/jqXMLUtils.pack.js</js>
- <js minimize="false">/scripts/cufon/cufon-yui.js</js>
- <js minimize="false">/scripts/cufon/font.js</js>
- <js minimize="false">/scripts/cufon/replace.js</js>
- </group>
- <group name="javaonly-scripts">
- <js>/scripts/scriptFile1.js</js>
- <js>/scripts/scriptFile2.js</js>
- </group>
- <group name="javaonly-debugging">
- <js minimize="false">/scripts/scriptDebug1.js</js>
- <js minimize="false">/scripts/scriptDebug1.js</js>
- </group>
- <group name="javaonly-styles">
- <css>/styles/screen/base.css</css>
- <css>/styles/screen/layout.css</css>
- <css>/styles/screen/content.css</css>
- <css>/styles/screen/menu.css</css>
- <css>/styles/screen/footer.css</css>
- <css>/styles/screen/login.css</css>
- <css>/styles/screen/tooltip.css</css>
- <css>/styles/screen/homepage.css</css>
- </group>
- </groups>
- </pre>
随后,我们在Maven配置文件中添加WRO4J插件。如下:
- <plugin>
- <groupId>ro.isdc.wro4j</groupId>
- <artifactId>wro4j-maven-plugin</artifactId>
- <version>${wro4j.version}</version>
- <executions>
- <execution>
- <id>optimize-web-resources</id>
- <phase>compile</phase>
- <goals>
- <goal>run</goal>
- </goals>
- </execution>
- </executions>
- <configuration>
- <ignoreMissingResources>false</ignoreMissingResources>
- <jsDestinationFolder>
- ${project.build.directory}/${project.build.finalName}/scripts/wro/
- </jsDestinationFolder>
- <cssDestinationFolder>
- ${project.build.directory}/${project.build.finalName}/styles/wro/
- </cssDestinationFolder>
- <wroManagerFactory>
- ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory
- </wroManagerFactory>
- </configuration>
- </plugin>
最后,我们在网页上添加最小化后的资源文件,如下:
- <link rel="stylesheet" type="text/css" href="/wro/javaonly-styles.css" />
- <script type="text/javascript" src="/wro/javaonly-base-scripts.js"></script>