使用 jawr 压缩js css

背景：web项目中通常会引入大量的js及css，为了开发方便和提高代码的重用性，也会更多的将工具类的js独立成一个文件，css同样如此；这样就导致了几乎每个页面都重复着导入js及css的代码，同时当用户访问web页面时，将会创建多个请求，而每个请求都将重复着和服务器请求响应的操作，这样势必影响页面加载速度，降低客户体验

 

开发：搜索发现了jawr项目，该项目做到了将多个资源合并压缩，包括js、css甚至image

项目文档：https://j-a-w-r.github.io

jar关联：http://mvnrepository.com/artifact/net.jawr/jawr-core

 

1、开始按流程开发：如果是Maven项目直接配置pom节点即可直接上手，如果普通web项目需要根据自己用到的包按需下载，再添加到项目的lib中

 

2、配置web.xml，增加servlet节点

 

<servlet>
		<servlet-name>JavascriptServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
       <init-param>
               <param-name>configLocation</param-name>
               <param-value>jawr.properties</param-value>
       </init-param>
       <load-on-startup>0</load-on-startup>
   </servlet>

	<servlet>
		<servlet-name>CSSServlet</servlet-name>
		<servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
		<init-param>
		  <param-name>configLocation</param-name>
		  <param-value>jawr.properties</param-value>
		</init-param>
		<init-param>
		  <param-name>type</param-name>
		  <param-value>css</param-value>
		</init-param>
		<load-on-startup>0</load-on-startup>
	</servlet>

	<servlet-mapping>
	    <servlet-name>JavascriptServlet</servlet-name>
	    <url-pattern>*.js</url-pattern>
	</servlet-mapping>
    <servlet-mapping>
	    <servlet-name>CSSServlet</servlet-name>
	    <url-pattern>*.css</url-pattern>
    </servlet-mapping>

  有了这个配置，系统启动的时候jawr将读取项目中的所有js、css并将它们缓存起来已提高访问响应的效率

 

 

2、项目的src目录新建jawr.properties文件，内容如下

 

jawr.charset.name=UTF-8
jawr.locale.generator.resourceBundle.charset=UTF-8
#The interval in seconds in which Jawr checks whether the configuration or the bundles have changed. If this value is set, when you change the properties file or a bundle file, Jawr will detect it and redeploy itself so you don’t need to restart the server to test your changes.
jawr.config.reload.interval=5

jawr.js.bundle.factory.bundlepostprocessors=YUI
#jawr.css.bundle.factory.bundlepostprocessors=YUI

jawr.working.directory=D:\\jawr\\temp
jawr.basecontext.directory=D:\\jawr\\temp

#jawr.debug.on=true
jawr.js.use.cache=false
jawr.css.use.cache=false
jawr.use.generator.cache=false

#定义全局包，定义后其他不用显示调用，将自动引用；多个使用order指定顺序；定义的bundle id不能有.
jawr.js.bundle.jquery_19.id=/bundles/jquery_1.9.js
jawr.js.bundle.jquery_19.mappings=/1503/js/jquery_1.9.js

jawr.css.bundle.index.id=/bundles/index.css
jawr.css.bundle.index.mappings=/1503/css/reset.css

   jawr.config.reload.interval 表示自动监控该文件修改重新加载的时间，单位为秒；开发是比较有用，不用自己手动重启（注意修改js或者css源文件是不会被自动加载的，需要手动重启web服务器）

 

  jawr.debug.on 设置为true时，页面将显示合并之前多个script标签，方便调试

 jawr.js.bundle.factory.bundlepostprocessors 标识使用哪种框架来执行js压缩，不配置默认好像是postprocessors，但启动时有些js编译不通过，所以修改成了YUI

 jawr.js.use.cache、jawr.css.use.cache、jawr.use.generator.cache 开发的时候最好将这三个都设置为true，避免由于缓存的问题导致修改了源码也无法从新合并压缩的问题

 

 下面就是指定访问的路径，设置路径映射的源文件

 

jawr.js.bundle.jquery_19.id=/bundles/jquery_1.9.js
#jquery_19是自己定义的，注意不能有. 也不区分大小写

 

jawr.js.bundle.jquery_19.mappings=/1503/js/jquery_1.9.js,...
#配置源文件路径，多个用,隔开；可设置目录如/*
jawr.js.bundle.lib.global=true
#可指定lib为全局的，指定后页面无需导入，将自动加载定义的资源
jawr.js.bundle.lib.order=1
#指定全局后，如果有多个，可指定加载顺序

jawr.js.bundle.foo.dependencies=lib
#同时也可以使用 dependencies 标记导入其他公共已定义的资源包

#这两种，其实一般不建议这么做，这有就会产生多个script标签

   更多介绍可查看官方文档

 

3、页面导入

 jsp页面

 

<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>
<jwr:style src="/bundles/index.css"></jwr:style>
<jwr:script src="/bundles/index.js"></jwr:script>

 or html页面

 

<script type="text/javascript" src="./jawr_loader.js" ></script>
    <script>
            JAWR.loader.style('/bundles/index.css');
            JAWR.loader.script('/bundles/index.js');
    </script>

 

完成后访问你的页面，查看页面源码将看到

<link rel="stylesheet" type="text/css" media="screen" href="/xxx/gzip_1567303866/bundles/index.css" />

<script type="text/javascript" src="/xxx/gzip_N722610567/bundles/index.js" ></script>

 

点击进去看看，发现已经将我们预定义的js及css合并而且min了

 

最后值得注意的是，如果你想在合并的某些地方换行（因为合并时会去掉注释）可以使用

*!**/

 个来标识哦

 

至此，已经实现预期效果