使用 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了
最后值得注意的是，如果你想在合并的某些地方换行（因为合并时会去掉注释）可以使用
*!**/
个来标识哦
至此，已经实现预期效果