java Web程序使用wro4j合并压缩jscss等静态资源

Posted 不积跬步无以至千里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java Web程序使用wro4j合并压缩jscss等静态资源相关的知识，希望对你有一定的参考价值。

在Web项目中，js、css合并压缩,不仅有利于减少Http请求数量、减少宽带资源占用，还能有效的管理各种js、css的引入，使整个项目更加有序。而对于访问用户来说，其更大的好处是增加了页面的打开速度，大大提升了用户体验。

所以，互联网各类网站，会通过各种手段，对静态文件进行合并、压缩，动静分离，使用CDN加速等。以此达到网站访问速度的优化。
everycoding.com官网使用的是Java语言开发。因此使用了Java 方面的第三方Jar:wro4j来压缩Js、CSS。本文主要介绍Java Web程序是如何使用wro4j合并、压缩js、Css等静态资源的。

1.    首先下载wro4j-core.1.6.2.jar，maven管理的项目可使用如下依赖获取架包。

  1. <dependency>
  2.     <groupId>ro.isdc.wro4j</groupId>
  3.     <artifactId>wro4j-core</artifactId>
  4.     <version>1.6.2</version>
  5. </dependency>


2.    配置Js、CSS合并策略。新建wro.xml文件，放置在WEB-INF目录下面
即：/src/main/webapp/WEB-INF/wro.xml。以everycoding官网代码为例，配置详情如下：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.     xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">
  4.     <group name="basic">
  5.         <css>/static/css/front.css</css>
  6.         <js>/static/js/jquery.js</js>
  7.         <js>/static/js/jquery.paging.min.js</js>
  8.         <js>/static/js/front/global.js</js>
  9.         <js>/static/js/front/search.js</js>
  10.     </group>
  11.  
  12.     <group name="custom">
  13.         <css>/static/css/front.css</css>
  14.         <css>/static/css/comment/comment.css</css>
  15.         <css>/static/plugins/syntaxhighlighter/shCore.css</css>
  16.         <js>/static/js/front/coding.js</js>
  17.     </group>
  18.  
  19. </groups>


3.    在视图页面引入合并后的js、css.详情可见everycoding.com站点的引入方式

  1. <link href="/static/css/basic.css?minimize=false&v=1433678168807" rel="stylesheet">
  2. <script src="/static/js/basic.js?minimize=false&v=1433524342015"></script>


4.    在web.xml中配置wro4j的过滤器，使js、css合并策略生效。代码配置方式如下：
其中，/static/是Everycoding官网放置静态文件的目录，具体配置请参考自身项目

  1. <filter>
  2.     <filter-name>WebResourceOptimizer</filter-name>
  3.     <filter-class>
  4.         ro.isdc.wro.http.WroFilter
  5.     </filter-class>
  6.     <init-param>
  7.         <param-name>debug</param-name>
  8.         <param-value>true</param-value>
  9.     </init-param>
  10.     <init-param>
  11.         <param-name>disableCache</param-name>
  12.         <param-value>true</param-value>
  13.     </init-param>
  14.     <!-- <init-param> <param-name>gzipResources</param-name> <param-value>false</param-value> 
  15.         </init-param> <init-param> <param-name>cacheUpdatePeriod</param-name> <param-value>1</param-value> 
  16.         </init-param> <init-param> <param-name>modelUpdatePeriod</param-name> <param-value>1</param-value> 
  17.         </init-param> <init-param> <param-name>minimizeEnabled</param-name> <param-value>true</param-value> 
  18.         </init-param> -->
  19. </filter>
  20. <filter-mapping>
  21.     <filter-name>WebResourceOptimizer</filter-name>
  22.     <url-pattern>/static/*</url-pattern>
  23. </filter-mapping>


5.    Web.xml中配置的wro4j属性Debug的作用
Debug:在开发环境，一般设置为true。生产环境设置为false
那么在开发环境中，将debug设置为true有什么好处呢？
原因是：当debug为false时，视图中引入的js、css都是合并压缩过的代码，尤其是Js，不利于我们开发过程中进行断点调试等工作。
如果，我们想在开发过程中，断点调试Js代码，需要将Debug设置为true。同时，视图引入的js代码部分，需要加上参数：minimize=false。表明：合并，但是不压缩js。
如：/static/js/basic.js?minimize=false
需要注意的时，当debug=false时，这个参数的作用将失效。Js、Css在生成环境一定是压缩的状态。

6.    wro4j相关配置属性详解

属性 默认值 描述
debug true true代表开发环境，false代表生成环境
minimizeEnabled true 是否压缩资源
gzipResources true True，则表明response将开启gzip
resourceWatcherUpdatePeriod 0 怎样的频率静态资源更新被监控，0表明不监控。      当监控到资源有更新时，则静态资源的缓存失效。      (since    1.4.8)
resourceWatcherAsync false 对异步更新的静态资源的监控，当属性resourceWatcherUpdatePeriod 配置大于0时，这个值才有意义 (since 1.7.3)
cacheUpdatePeriod 0 怎么样的频率刷新缓存。0表示不刷新静态缓存。
modelUpdatePeriod 0 怎样的频率刷新wro.xml合并压缩策略。0表示不刷新。
header   见官网说明
disableCache false 是否禁用静态资源缓存1.7.6之后的版本已废弃
parallelPreprocessing false 是否开启预处理器并行执行，以提高效率
connectionTimeout 2000 外部资源访问的超时时间，1.4.5版本后有效
managerFactoryClassName N/A 默认BaseWroManagerFactory管理
encoding UTF-8 设置读写编码格式
ignoreMissingResources true 为false时，丢失的资源会引发异常产生。True则会忽略这些异常。
ignoreEmptyGroup true 为false时，空引入链接将失败。True，则忽略。1.4.5之后版本有效。
ignoreFailingProcessor false 为true时，有问题的资源将以原生的方式引入。      1.4.7版本后有效。
cacheGzippedContent false 缓存是否使用gzipped的静态内容. since 1.4.4之后版本有效
jmxEnabled true 是否关闭JMX.
mbeanName wro4j JMX    console 见官网


Wro4j的详细用法可参考：http://code.google.com/p/wro4j/wiki/Installation
如果Java Web项目希望使用动静分离的方式单独部署静态文件，可参考：http://everycoding.com/coding/67.html
























以上是关于java Web程序使用wro4j合并压缩jscss等静态资源的主要内容，如果未能解决你的问题，请参考以下文章

System.Web.Optimization 合并压缩技术的使用

带有 wro4j 和 Google Closure 编译器的 ECMASCRIPT 5

web性能优化—— 打包构建优化

JSCS: Please specify path to 'JSCS' package

JAVA程序合并工具出错

Browserify 缩小和合并文件