背景: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了
最后值得注意的是,如果你想在合并的某些地方换行(因为合并时会去掉注释)可以使用
*!**/
个来标识哦
至此,已经实现预期效果
相关推荐
3. **资源压缩**:合并后的文件会被选定的压缩器进行压缩,例如使用 YUI Compressor 或 Closure Compiler 对 JavaScript 进行压缩,使用 CSSMin 对 CSS 进行压缩。 4. **资源版本化**:为了有效利用浏览器缓存,Jawr...
Jawr是一款强大的Java Web资源打包工具,它能够有效地优化、管理和合并JavaScript和CSS文件,从而提升网页加载速度和降低服务器负担。Spring框架则是Java领域最著名的轻量级应用框架,广泛应用于企业级开发中。 ...
Jawr是一个强大的Maven插件,主要用于优化Web应用程序的资源管理,特别是JavaScript和CSS文件。它能够合并、压缩、最小化以及对静态资源进行MD5哈希命名,以实现更好的缓存策略。在Web开发中,这种优化对于提高网站...
2. **Jawr**:Jawr是一个用于优化Web应用性能的工具,主要功能包括JavaScript和CSS的合并、压缩以及精灵图生成。它可以与GWT等其他框架集成,提高页面加载速度。 3. **开源许可证**:这两个项目都是开源的,这意味...
【描述】"common-jawr.zip"是与jawr相关的压缩文件,jawr是一个用于优化Web应用的开源Java库,特别关注于JavaScript和CSS资源的合并、压缩和版本管理。它提供Web片段和依赖项,意味着这个压缩包包含了用于构建和运行...
再者,Jawr是JavaScript和CSS的优化工具,它可以合并、压缩和混淆这些资源,从而减少HTTP请求的数量和大小,提升网页加载速度。在“Book Stationery”项目中,Jawr被用来管理Extjs的库文件和其他前端资源,确保在不...
Jawr是Web应用资源优化工具,它可以合并和压缩JavaScript和CSS文件,减少HTTP请求,提高页面加载速度。此外,Jawr还可以处理图片精灵,进一步提升网站性能。 **POI库** Apache POI是Java库,用于读写Microsoft ...
JAWR是一个Java Web应用的资源管理框架,它可以将CSS、JavaScript、图片等静态资源进行合并、压缩,以提高网页加载速度并减少HTTP请求。在这里,JAWR被用来处理TinyMCE编辑器的资源,可能包括将其整合到AngularJS...
Jawr是JavaScript和CSS的打包工具,它可以合并、压缩和缓存资源,优化网页加载速度。在文具申请系统的开发中,Jawr可能用于管理和优化前端的脚本和样式文件,减少HTTP请求,提高页面加载效率。 Java Architecture ...
同时,JAWR也支持动态生成CSS和JavaScript,方便在运行时调整资源。 JAXB(Java Architecture for XML Binding)是Java平台的标准,用于将XML文档和Java对象互相转换。在文具预订系统中,JAXB可能用于将后台的数据...
**Jawr** 是一个JavaScript和CSS打包工具,用于优化Web应用的性能。它能将多个文件合并成一个,减少HTTP请求,同时还可以进行压缩和混淆,进一步减小文件大小,提高页面加载速度。在"Book Stationery"项目中,Jawr...
5. **Jawr**:Jawr是一款JavaScript和CSS资源管理和优化工具,它可以合并、压缩和版本化文件,从而减少HTTP请求,提高网页加载速度。在Book Stationery项目中,Jawr可能用于优化前端资源,提升页面加载性能。 6. **...
2. **Jawr**:这是一个用于优化前端资源的Java库,主要用于合并和压缩JavaScript、CSS文件,减少HTTP请求,提升网页加载速度。 3. **POI**:Apache POI 是一套用于读写Microsoft Office格式文件的Java库,可能在这...
3. **Jawr**:这是一个用于优化Web资源(如CSS和JavaScript)的工具,通过合并、压缩和缓存资源来提高页面加载速度。在系统中,Jawr可能被用来提升前端性能,减少HTTP请求,降低服务器负载。 4. **JAXB**:Java ...