`

使用 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了

 

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

*!**/

 个来标识哦

 

至此,已经实现预期效果

 

分享到:
评论

相关推荐

    jawr使用

    3. **资源压缩**:合并后的文件会被选定的压缩器进行压缩,例如使用 YUI Compressor 或 Closure Compiler 对 JavaScript 进行压缩,使用 CSSMin 对 CSS 进行压缩。 4. **资源版本化**:为了有效利用浏览器缓存,Jawr...

    jawr-spring-2.0.x-integration-test-3.5.zip

    Jawr是一款强大的Java Web资源打包工具,它能够有效地优化、管理和合并JavaScript和CSS文件,从而提升网页加载速度和降低服务器负担。Spring框架则是Java领域最著名的轻量级应用框架,广泛应用于企业级开发中。 ...

    maven-jawr-plugin-1.5.2.zip

    Jawr是一个强大的Maven插件,主要用于优化Web应用程序的资源管理,特别是JavaScript和CSS文件。它能够合并、压缩、最小化以及对静态资源进行MD5哈希命名,以实现更好的缓存策略。在Web开发中,这种优化对于提高网站...

    gwt-dev-2.6.0-rc4.zip

    2. **Jawr**:Jawr是一个用于优化Web应用性能的工具,主要功能包括JavaScript和CSS的合并、压缩以及精灵图生成。它可以与GWT等其他框架集成,提高页面加载速度。 3. **开源许可证**:这两个项目都是开源的,这意味...

    hawtio-default-offline-1.2-M13.zip

    【描述】"common-jawr.zip"是与jawr相关的压缩文件,jawr是一个用于优化Web应用的开源Java库,特别关注于JavaScript和CSS资源的合并、压缩和版本管理。它提供Web片段和依赖项,意味着这个压缩包包含了用于构建和运行...

    Book Stationery

    再者,Jawr是JavaScript和CSS的优化工具,它可以合并、压缩和混淆这些资源,从而减少HTTP请求的数量和大小,提升网页加载速度。在“Book Stationery”项目中,Jawr被用来管理Extjs的库文件和其他前端资源,确保在不...

    Extjs 源代码 申请文具

    Jawr是Web应用资源优化工具,它可以合并和压缩JavaScript和CSS文件,减少HTTP请求,提高页面加载速度。此外,Jawr还可以处理图片精灵,进一步提升网站性能。 **POI库** Apache POI是Java库,用于读写Microsoft ...

    jbossws-spi-2.3.0.Final.zip

    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可能用于将后台的数据...

    Internal referral and book stationery

    **Jawr** 是一个JavaScript和CSS打包工具,用于优化Web应用的性能。它能将多个文件合并成一个,减少HTTP请求,同时还可以进行压缩和混淆,进一步减小文件大小,提高页面加载速度。在"Book Stationery"项目中,Jawr...

    EXTJS Book stationery source code

    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 ...

Global site tag (gtag.js) - Google Analytics