Java web的js/css合并组件

在Java Web开发中,通过合并JS和CSS文件减少请求次数,提高页面加载速度。本文介绍了一个基于Spring Boot的扩展工具,该工具在启动时加载文件到内存,按需合并并返回给前端。此外,提供了详细的配置说明和使用方法,支持多种字符编码和从classpath读取资源。

        在开发Java web工程中,必定需要使用的JavaScript与css,很多时候,一个页面需要引入多个JavaScript或者css文件,一般情况下,浏览器会向服务器发送多次请求去获取这些静态资源文件,因而会有多次3次握手,请求时间就有所增长。如果将要请求的多个js文件在服务端合并成一个,那么就实现了一次请求就获取到了所有需要的js文件内容。即在获取相同文件容量情况下,减少了不必要的3次握手时间。Apache(mod_concatx)与tengine(ngx_http_concat_module)也提供了此功能。

        如果工程是基于spring boot框架的话,可以使用我编写的一个扩展小工具(spring-boot-starter-js-css)即可。

        原理是,在工程启动时,将js、css分别扫描并加载到内存,接收到请求,根据参数获取对应的文件,并合并成一个文件流,返回给前端请求者。

        项目主页(工具最新信息请移步于此):https://gitee.com/hm-tools/hm-tools-js-css

        本工具项目是开源的,大家可以下载源码学习使用,主要流程思路很简单,根据请求参数读取指定的多个JS文件,然后合并成一个数据流返回给前端。稍微有技术含量的是本工具能够自动识别读取文件的字符编码(GBK,UTF-8),即指定的资源目录下可以同时存在多种字符编码的文件也不用担心乱码问题。另外,使用spring boot框架一般会打成jar包部署运行,本工具支持从当前工程运行的classpath路径中读取jar包中的静态资源文件,且还提供文件目录浏览接口。

        引入jar包:可以在https://search.maven.org/以关键字“hm-tools-js-css”搜索最新版本的maven信息,在工程的pom文件中引入即可。

例如:

<dependency>
    <groupId>top.hmtools</groupId>
    <artifactId>spring-boot-starter-js-css</artifactId>
    <version>0.2.1</version>
</dependency>

使用方法:

 

1、引入jar包,即可使用,缺省会扫描工程中的所有JavaScript与css文件。

2、在需要引入js页面文件中,使用“${你的工程网址及端口号}//get_js/${js文件名及后缀,多个以英文逗号分隔}”,例如:http://www.jianghaibo.cn:80/get_js/jquery.js,user.js

    

配置内容:

 

  • hm_tools.js_css.enabled=true 是否启用本jar包组件功能,当配置为“true”时或者不配置该值时均表示启用,为“false”时则不启用。
  • hm_tools.js_css.js_uri=/get_js 配置获取javascript文件内容的请求uri
  • hm_tools.js_css.css_uri=/get_css 配置获取CSS文件内容的请求uri
  • hm_tools.js_css.refresh_js_uri=/refresh_js 配置刷新javascript文件缓存内容的请求uri
  • hm_tools.js_css.refresh_css_uri=/refresh_css 配置刷新css文件缓存内容的请求uri
  • hm_tools.js_css.js_files_paths=d:\javascript,e:\javascript 配置获取javascript文件内容的磁盘路径集合,以英文逗号(,)分隔
  • hm_tools.js_css.css_files_paths=d:\css,e:\css 配置获取css文件内容的磁盘路径集合,以英文逗号(,)分隔
  • hm_tools.js_css.encoding=UTF-8 获取的文件内容的字符编码格式名称,缺省为“UTF-8”
  • hm_tools.js_css.list_js_uri=/list_js 获取所有javascript文件列表请求uri
  • hm_tools.js_css.list_css_uri=/list_css 获取所有css文件列表请求uri

 

 

评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值