wro4j和maven plugin在编译期间压缩静态资源

最新推荐文章于 2021-08-03 18:38:40 发布
最新推荐文章于 2021-08-03 18:38:40 发布
阅读量388 收藏
点赞数
分类专栏： 前端

优化前: 
基本上所有的jsp都引用了这一大坨静态文件:

<link rel="stylesheet" type="text/css" href="${ctxPath}/css/skin.css"/>
<link rel="stylesheet" type="text/css" href="${ctxPath}/css/jquery-ui-1.8.23.custom.css"/>
<link rel="stylesheet" type="text/css" href="${ctxPath}/css/validationEngine.jquery.css"/>

<script type="text/javascript">var GV = {ctxPath: '${ctxPath}',imgPath: '${ctxPath}/css'};</script>
<script type="text/javascript" src="${ctxPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery.fixedtableheader.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/roll.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery.pagination.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery.rooFixed.js"></script>
<script type="text/javascript" src="${ctxPath}/js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="${ctxPath}/js/json2.js"></script>
<script type="text/javascript" src="${ctxPath}/js/common.js"></script>

引用的文件很多,并且文件体积没有压缩,导致页面请求的时间非常长.

另外还有一个问题,就是为了能够充分利用浏览器的缓存,静态资源的文件名称最好能够做到版本化控制.

这样前端web服务器就可以放心大胆的开启缓存功能而不用担心缓存过期问题,因为如果一旦静态资源文件有修改的话, 
会重新生成一个文件名称.

分两步进行.

第一步:引入wro4j,在编译时期将上述分散的多个文件整合成少数几个文件,并且将文件最小化.

第二步:在生成的静态资源文件的文件名称上加入时间信息

这是两步优化之后的引用情况:

${platform:cssFile("/wro/basic") }
<script type="text/javascript">var GV = {ctxPath: '${ctxPath}',imgPath: '${ctxPath}/css'};</script>
${platform:jsFile("/wro/basic") }
${platform:jsFile("/wro/custom") }

只引用了1个css文件,2个js文件.http请求从10几个减少到3个,并且整体文件体积缩小了近一半.

下面介绍优化流程.

第一步：合并并且最小化文件.

1.添加wro4j的maven依赖

 <wro4j.version>1.6.2</wro4j.version>


  <dependency>
   <groupId>ro.isdc.wro4j</groupId>
   <artifactId>wro4j-core</artifactId>
   <version>${wro4j.version}</version>
   <exclusions>
    <exclusion>

    <!-- 因为项目中的其他jar包已经引入了不同版本的slf4j,所以这里避免jar重叠所以不引入 -->
     <groupId>org.slf4j</groupId>
     <artifactId>slf4j-api</artifactId>
    </exclusion>
   </exclusions>
  </dependency>

2.添加wro4j maven plugin

   <plugin>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-maven-plugin</artifactId>
    <version>${wro4j.version}</version>
    <executions>
     <execution>
      <phase>compile</phase>
      <goals>
       <goal>run</goal>
      </goals>
     </execution>
    </executions>
    <configuration>
     <targetGroups>basic,custom</targetGroups>

    <!-- 这个配置是告诉wro4j在打包静态资源的时候是否需要最小化文件,开发的时候可以设成false,方便调试 -->
     <minimize>true</minimize>
     <destinationFolder>${basedir}/src/main/webapp/wro/</destinationFolder>
     <contextFolder>${basedir}/src/main/webapp/</contextFolder>

<!-- 这个配置是第二步优化需要用到的,暂时忽略 -->
     <wroManagerFactory>com.rootrip.platform.common.web.wro.CustomWroManagerFactory</wroManagerFactory>
    </configuration>
         </plugin>

如果开发环境是eclipse的话,可以下载m2e-wro4j这个插件.

下载地址:http://download.jboss.org/jbosstools/updates/m2e-wro4j/

这个插件的主要功能是能够帮助我们在开发环境下修改对应的静态文件,或者pom.xml文件的时候能够自动生成打包好的js和css文件.

对开发来说就会方便很多.只要修改源文件就能看见修改后的结果.

3.在WEB-INF目录下添加wro.xml文件,这个文件的作用就是告诉wro4j需要以怎样的策略打包jss和css文件.

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd">

 <group name="basic">
  <css>/css/basic.css</css>
  <css>/css/skin.css</css>
  <css>/css/jquery-ui-1.8.23.custom.css</css>
  <css>/css/validationEngine.jquery.css</css>

  <js>/js/jquery-1.7.2.min.js</js>
  <js>/js/jquery-ui-1.8.23.custom.min.js</js>
  <js>/js/jquery.validationEngine.js</js>
  <js>/js/jquery.fixedtableheader.min.js</js>
  <js>/js/roll.js</js>
  <js>/js/jquery.pagination.js</js>
  <js>/js/jquery.rooFixed.js</js>
  <js>/js/jquery.ui.datepicker-zh-CN.js</js>
  <js>/js/json2.js</js>
 </group>

 <group name="custom">
  <js>/js/jquery.validationEngine-zh_CN.js</js>
  <js>/js/common.js</js>
 </group>

</groups>

官方文档：http://code.google.com/p/wro4j/wiki/WroFileFormat

其实这个配置文件很好理解,如果不愿看官方文档的朋友我在这简单介绍下.

上面这样配置的目的就是告诉wro4j要将

/css/basic.css 
/css/skin.css 
/css/jquery-ui-1.8.23.custom.css 
/css/validationEngine.jquery.css

这四个文件整合到一起,生成一个叫basic.css的文件到指定目录(wro4j-maven-plugin里配置的),将

/js/jquery-1.7.2.min.js 
/js/jquery-ui-1.8.23.custom.min.js 
/js/jquery.validationEngine.js 
/js/jquery.fixedtableheader.min.js 
/js/roll.js 
/js/jquery.pagination.js 
/js/jquery.rooFixed.js 
/js/jquery.ui.datepicker-zh-CN.js 
/js/json2.js

这几个文件整合到一起,生成一个叫basic.js的文件到指定目录.

最后将

/js/jquery.validationEngine-zh_CN.js 
/js/common.js

这两个文件整合到一起,,生成一个叫custom.js的文件到指定目录.

第一步搞定,这时候如果你的开发环境是eclipse并且安装了插件的话,应该就能在你工程的%your webapp%/wor/目录下看见生成好的

basic.css,basic.js和custom.js这三个文件了.

然后你再将你的静态资源引用路径改成

<link rel="stylesheet" type="text/css" href="${ctxPath}/wro/basic.css"/>
<script type="text/javascript" src="${ctxPath}/wro/basic.js"></script>
<script type="text/javascript" src="${ctxPath}/wro/custom.js"></script>

就ok了.每次修改被引用到的css或js文件的时候,这些文件都将重新生成.

如果开发环境是eclipse但是没有安装m2e-wro4j插件的话,pom.xml可能需要额外配置.

第二步：给生成的文件名称中加入时间信息并通过el自定义函数引用脚本文件.

  1. 创建DailyNamingStrategy类
public class DailyNamingStrategy extends TimestampNamingStrategy {

 protected final Logger log = LoggerFactory.getLogger(DailyNamingStrategy.class);

 @Override
 protected long getTimestamp() {
  String dateStr = DateUtil.formatDate(new Date(), "yyyyMMddHH");
  return Long.valueOf(dateStr);
 }

}

2.创建CustomWroManagerFactory类

//这个类就是在wro4j-maven-plugin里配置的wroManagerFactory参数
public class CustomWroManagerFactory extends
  DefaultStandaloneContextAwareManagerFactory {
 public CustomWroManagerFactory() {
  setNamingStrategy(new DailyNamingStrategy());
 }
}

上面这两个类的作用是使用wro4j提供的文件命名策略,这样生成的文件名就会带上时间信息了.

例如：basic-2013020217.js

但是现在又会发现一个问题:如果静态资源文件名称不固定的话,那怎么样引用呢?

这时候就需要通过动态生成script与link来解决了.

因为项目使用的是jsp页面,所以通过el自定义函数来实现标签生成.

3.创建PlatformFunction类

public class PlatformFunction {

 private static Logger log = LoggerFactory.getLogger(PlatformFunction.class);


 private static ConcurrentMap<String, String> staticFileCache = new ConcurrentHashMap<>();

 private static AtomicBoolean initialized = new AtomicBoolean(false);

 private static final String WRO_Path = "/wro/";

 private static final String JS_SCRIPT = "<script type=\"text/javascript\" src=\"%s\"></script>";
 private static final String CSS_SCRIPT = "<link rel=\"stylesheet\" type=\"text/css\" href=\"%s\">";

 private static String contextPath = null; 

 /**
  * 该方法根据给出的路径,生成js脚本加载标签
  * 例如传入参数/wro/custom,该方法会寻找webapp路径下/wro目录中以custom开头,以js后缀结尾的文件名称名称.
  * 然后拼成<script type="text/javascript" src="${ctxPath}/wro/custom-20130201.js"></script>返回
  * 如果查找到多个文件,返回根据文件名排序最大的文件
  * @param str
  * @return
  */
 public static String jsFile(String filePath) {
  String jsFile = staticFileCache.get(buildCacheKey(filePath, "js"));
  if(jsFile == null) {
   log.error("加载js文件失败,缓存中找不到对应的文件[{}]", filePath);
  }
  return String.format(JS_SCRIPT, jsFile);
 }

 /**
  * 该方法根据给出的路径,生成css脚本加载标签
  * 例如传入参数/wro/custom,该方法会寻找webapp路径下/wro目录中以custom开头,以css后缀结尾的文件名称名称.
  * 然后拼成<link rel="stylesheet" type="text/css" href="${ctxPath}/wro/basic-20130201.css">返回
  * 如果查找到多个文件,返回根据文件名排序最大的文件
  * @param str
  * @return
  */
 public static String cssFile(String filePath) {
  String cssFile = staticFileCache.get(buildCacheKey(filePath, "css"));
  if(cssFile == null) {
   log.error("加载css文件失败,缓存中找不到对应的文件[{}]", filePath);
  }
  return String.format(CSS_SCRIPT, cssFile);
 }

 public static void init() throws IOException {
  if(initialized.compareAndSet(false, true)) {
   ServletContext sc = Platform.getInstance().getServletContext();
   if(sc == null) {
    throw new PlatformException("查找静态资源的时候的时候发现servlet context 为null");
   }
   contextPath = Platform.getInstance().getContextPath();
   File wroDirectory = new ServletContextResource(sc, WRO_Path).getFile();
   if(!wroDirectory.exists() || !wroDirectory.isDirectory()) {
    throw new PlatformException("查找静态资源的时候发现对应目录不存在[" + wroDirectory.getAbsolutePath() + "]");
   }
   //将wro目录下已有文件加入缓存
   for(File file : wroDirectory.listFiles()) {
    handleNewFile(file);
   }
   //监控wro目录,如果有文件生成,则判断是否是较新的文件,是的话则把文件名加入缓存
   new Thread(new WroFileWatcher(wroDirectory.getAbsolutePath())).start();
  }
 }

 private static void handleNewFile(File file) {
  String fileName = file.getName();
  Pattern p = Pattern.compile("^(\\w+)\\-\\d+\\.(js|css)$");
  Matcher m = p.matcher(fileName);
  if(!m.find() || m.groupCount() < 2) return;
  String fakeName = m.group(1);
  String fileType = m.group(2);
  //暂时限定只能匹配/wro/目录下的文件
  String key = buildCacheKey(WRO_Path + fakeName, fileType);
  if(staticFileCache.putIfAbsent(key, fileName) != null) {
   synchronized(staticFileCache) {
    String cachedFileName = staticFileCache.get(key);
    if(fileName.compareTo(cachedFileName) > 0) {
     staticFileCache.put(key, contextPath + WRO_Path + fileName);
    }
   }
  }
 }

 private static String buildCacheKey(String fakeName, String fileType) {
  return fakeName + "-" + fileType;
 }

 static class WroFileWatcher implements Runnable {

  private static Logger log = LoggerFactory.getLogger(WroFileWatcher.class);

  private String wroAbsolutePathStr;

  public WroFileWatcher(String wroPathStr) {
   this.wroAbsolutePathStr = wroPathStr;
  }

  @Override
  public void run() {
   Path path = Paths.get(wroAbsolutePathStr);
   File wroDirectory = path.toFile();
   if(!wroDirectory.exists() || !wroDirectory.isDirectory()) {
    String message = "监控wro目录的时候发现对应目录不存在[" + wroAbsolutePathStr + "]";
    log.error(message);
    throw new PlatformException(message);
   }
   log.warn("开始监控wro目录[{}]", wroAbsolutePathStr);
   try {
    WatchService watcher = FileSystems.getDefault().newWatchService();
    path.register(watcher, StandardWatchEventKinds.ENTRY_CREATE);

    while (true) {
     WatchKey key = null;
     try {
      key = watcher.take();
     } catch (InterruptedException e) {
      log.error("", e);
      continue;
     }
     for (WatchEvent<?> event : key.pollEvents()) {
      if (event.kind() == StandardWatchEventKinds.OVERFLOW) {
       continue;
      }
      WatchEvent<Path> e = (WatchEvent<Path>) event;
      Path filePath = e.context();
      handleNewFile(filePath.toFile());
     }
     if (!key.reset()) {
      break;
     }
    }
   } catch (IOException e) {
    log.error("监控wro目录发生错误", e);
   }
   log.warn("停止监控wro目录[{}]", wroAbsolutePathStr);
  }
 }
}

对应的tld文件就不给出了,根据方法签名编写就行了.

其中的cssFile和jsFile方法分别实现引用css和js文件.

在页面使用的时候类似这样:

${platform:cssFile(“/wro/basic”) }

${platform:jsFile(“/wro/custom”) }

这个类的主要功能就是使用jdk7的WatchService监控wro目录的新增文件事件,

一旦有新的文件加到目录里,判断这个文件是不是最新的,如果是的话则使用这个文件名称引用.

这样一旦有新加的资源文件放到wro目录里,则能够自动被引用,不需要做任何代码上的修改,并且基本不影响性能.

到此为止功能已经实现.

但是我考虑到还有两个问题有待完善:

1.因为生成的文件名称精确到小时,如果这个小时之内有多次代码修改,生成的文件名都完全一样.

这样就算线上的代码有修改,对于已经有该文本缓存的浏览器来说,不会重新请求文件,也就看不到文件变化.

不过一般来说线上代码不会如此频繁改动,对于大多数应用来说影响不大.

2.在开发环境开发一段时间之后,wro目录下会生成一大堆的文件(因为m2e-wro4j插件在生成新的文件的时候不会删除旧文件,如果文件名相同会覆盖掉以前的文件),

这时候就需要手动删除时间靠前的旧文件,虽然系统会忽略旧文件,但是我相信大多数程序员和我一样是有些许洁癖的吧.

解决办法还是不少,比如可以写脚本定期清理掉旧文件.

初级码奴
关注
专栏目录
前端资源压缩合并maven插件之wro4j
shut1k的博客
11-15 1227
前端资源压缩合并maven插件之wro4j原文写于 2014-05-14 https://github.com/kuitos/kuitos.github.io/issues/5参考文章：前端性能优化-JS/CSS压缩合并how to pom配置，加入wro4j插件<!--自定义属性--> <properties> <webSourceDirectory>src/main/webapp</we
使用wro4j和maven在编译期间压缩js和css文件
iteye_20508的博客
02-03 271
最近在对一个web系统做性能优化. 而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环. 好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数. 因为是基于java的web系统,并且使用的是nginx+tomcat做为服务器. 最后考虑用wro4j和maven plugin在编译期间压缩静态资源. 优化前: 基本上所有的jsp都引用了这一大坨静态文...
Maven插件wro4j-maven-plugin压缩、合并js、css详解
weixin_34353714的博客
09-29 310
1. 在pom.xml文件中，引入wro4j-maven-plugin插件 <plugin> <groupId>ro.isdc.wro4j</groupId> <artifactId>wro4j-maven-plugin</artifactId> <version>${wro4j.ve...
maven hash 静态资源插件
chituzhi1532的博客
12-01 342
基于此文章(前端工程精粹（一）：静态资源版本更新与缓存)实现的maven插件 我们希望得到的是,修改了的文件的hash码是改变了,并且与现在和未修改前的文件的hash码不重复.Hash码并且越短越好. MD5生成的16进制长度是32位,SHA-256的更长,是64位.最后确定是选CRC32(介...
wro4j-spring-boot-starter：Spring Boot启动器和wro4j的自动配置（http：alexo.github.iowro4j）
01-30
Spring Boot启动程序和wro4j的自动配置： 是用于分析和优化Web资源的工具。 它汇集了几乎所有现代Web工具：JsHint，CssLint，JsMin，Google Closure压缩器，YUI Compressor，UglifyJs，Dojo Shrinksafe，Css变量...
mvn-wro4j-angular:maven，wro4j amd 角度
06-07
在IT行业中，Maven、WRO4J和Angular是三个重要的技术组件，它们在Web开发领域扮演着关键角色。本文将深入探讨这三个技术，并结合"mvn-wro4j-angular"项目，阐述它们如何协同工作。 首先，让我们从Maven开始。Maven...
wro4j-core-1.7.9.jar
04-16
wro4j-core-1.7.9.jar 是基于mmseg算法的一个轻量级开源中文分词器所需要的jar，已经测验过，欢迎下载！
wro4j-core-1.8.0.jar
08-19
Wro4j是用于分析和优化Web资源的工具，它汇集了几乎所有现代Web工具：JsHint，CssLint，JsMin，Google Closure压缩器，YUI Compressor，UglifyJs，Dojo Shrinksafe，Css变量支持，JSON压缩，Less，Sass，...
maven js css 压缩,使用wro4j和maven在编译期间压缩js和css文件（经典）
weixin_34617955的博客
08-03 574
最近在对一个web系统做性能优化.而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环.好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数.因为是基于java的web系统,并且使用的是nginx+tomcat做为服务器.最后考虑用wro4j和maven plugin在编译期间压缩静态资源.优化前:基本上所有的jsp都引用了这一大坨静态文件:Html代码 收藏代码va...
hash-resource:静态资源版本更新 maven插件
05-13
简介 maven 插件实现 我们希望得到的是,修改了的文件的hash码是改变了,并且与现在和未修改前的文件的hash码不重复.Hash码并且越短越好. MD5生成的16进制长度是32位,SHA-256的更长,是64位.最后确定是选CRC32 ,不过看到JDK(8) 里面还有个Adler32. 理论上来讲，CRC64的碰撞概率大约是每18×10^18个CRC码出现一次。有人测试过CRC32的碰撞概率,数据显示是1820W数据，冲突数量是38638个，还是比较可观。还有Adler32也可以选择,不过保守点还是选CRC32. 原理 拷贝warSourceDirectory (和maven-war-plugin的默认值一样是${basedir}/src/main/webapp)到 ${project.build.directory}/prepareWarSource 下,然后对js和css进行h
maven-replacer-plugin 静态资源版本号解决方案（css/js等）
YClimb的专栏
03-16 4233
maven-replacer-plugin 静态资源版本号解决方案（css/js等） 本文介绍如何使用 maven 的 com.google.code.maven-replacer-plugin 插件来自动添加版本号，防止浏览器缓存。 目录 1.解决方案 2.原始文件和最终生成效果 3.pom.xml 中插件添加 4.html中 css/js 文件引用规则 5.结语 ...
wro4j入门
大强博客
09-12 1050
适用于Java的Web资源优化器 Wro4j是用于分析和优化Web资源的工具。它汇集了几乎所有现代Web工具：JsHint，CssLint，JsMin，Google Closure压缩器，YUI Compressor，UglifyJs，Dojo Shrinksafe，Css变量支持，JSON压缩，Less，Sass，CoffeeScript 等等。 要开始使用wro4j，您只需遵循3个简单步骤...
在您的Maven构建中增强CSS
dlz00001的博客
06-08 130
认识我的人也知道我对GUI感兴趣：这意味着有时我会变得不习惯并深入研究样式表（即使我根本没有图形技能）。 当发生这种情况时，我总是会问如何最好地分解样式。 在这方面，缺少不同的CSS版本，因为它们不是由工程师管理的。 最近的趋势是从源代码生成CSS，它带来了一些有趣的属性，例如嵌套，变量，混合，继承和其他。 这种趋势的两个示例是LESS和SASS 。 在下面可以找到一个不太快的示例。 ...
java 压缩css_Java Web程序使用wro4j合并、压缩js、css等静态资源
weixin_34445112的博客
02-12 148
在Web项目中，js、css合并压缩,不仅有利于减少Http请求数量、减少宽带资源占用，还能有效的管理各种js、css的引入，使整个项目更加有序。而对于访问用户来说，其更大的好处是增加了页面的打开速度，大大提升了用户体验。所以，互联网各类网站，会通过各种手段，对静态文件进行合并、压缩，动静分离，使用CDN加速等。以此达到网站访问速度的优化。everycoding.com官网使用的是Java语言开发...
wro4j和maven plugin在编译期间压缩静态资源.
码农的苦逼日常
07-12 2217
优化前: 基本上所有的jsp都引用了这一大坨静态文件: <link rel="stylesheet" type="text/css" href="${ctxPath}/css/skin.css"/> <link rel="stylesheet" type="text/css" href="${ctxPath}/css/jquery-ui-1.8.23.custom.css"/> <link re
java maven项目结构_Maven的工程目录结构
weixin_33594621的博客
02-21 134
pom.xml 的参照模型xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">4.0.0com.brms.governorbrms-governor0.9.0pomUTF-81.6UTF-81.1.20.9.00.9.01.6.3false3.0....
web优化，wro4j实现css和js资源最小化
AlanJing________的博客
07-11 586
http://wangmengbk.iteye.com/blog/2176282 wro4j:Java Web资源压缩
在Efinity Synthesis中如何有效地进行RAM资源的自动推理和优化配置？
最新发布
10-25
综上所述，有效地在Efinity Synthesis中进行RAM资源的自动推理和优化配置，需要对工具提供的选项有深入的理解，并结合项目具体需求进行综合配置。这些知识和技能都能在《易灵思Efinity V3.7 Synthesis User Guide：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值