使用yuicompressor压缩js和css文件的两种方式

教你八步提高网站的访问速度(https://www.zhyd.me/article/44) 和记一次优化网站首页加载速度的过程(https://www.zhyd.me/article/70)这两篇文章中,曾介绍过关于网站优化方面的方式和方法,其中之一就是介绍了通过合并并压缩js和css文件以达到减少带宽压力、提高页面加载速度的方法,同时还能对网站资源达到一定的保护作用。

最最主要的是YUI Compressor是用Java语言开发的,并且是开源的(开源地址(https://github.com/yui/yuicompressor))!ps:感谢开源界的各位大牛!

说一千,到一万,总归要介绍具体怎么使用。

使用方式

先看YUI Compressor的使用说明(本文只罗列几个常用的、重要的属性,其他详细属性请参考官方文档)

全局配置项:

: 指定带压缩的文件类型,可选项为js或者css

: 指定读取文件的编码格式

: 将压缩内容输出到指定文件

JavaScript配置项:

: 带此参数表示只压缩不混淆

: 带刺参数表示保留所有分号

命令行压缩js和css文件

根据文档介绍,已经知道了具体怎么使用, 那么接下来就以

DBlog开源项目

为例,演示该工具的具体用法。

先看一下项目结构

我们需要将下的文件和下的文件分别压缩成一个单独的文件,暂定为和吧,然后在gzjs.sh中编写代码:

ps:代码中涉及到一个小知识点就是> 和 >> 的区别,简单讲就是>表示覆盖,>>表示追加

接下来,看一下和中的内容

再来对比下压缩前后的文件大小

到此为止,通过命令行的方式压缩js和css文件已经介绍完毕。那么这时候可能会有同学问了:有没有能直接集成到项目中的方法?这样我就不用每次手动执行了,最好是那种一次配置,终身可用的办法。

我想说,同学,你很皮哦~~~

显而易见,一定是有办法的,要不我也不在这瞎bb了。↓↓↓↓↓↓↓继续往下看↓↓↓↓↓↓↓

Maven集成YUI

还是拿DBlog开源项目为例,演示如何在maven中集成YUI Compressor。

第一步、添加maven插件

第二步、配置resources节点(重要)

这一步很重要,具体会在下面介绍到。

配置完成后,执行package操作,然后先去target目录下看一看编译后的文件

第三步、打包测试

可以看到,js文件已被压缩(css就不看了,一样是被压缩过的),此时再去运行下jar包,看看jar包中实际的js文件有没有没压缩。

OK,到此为止,使用Maven方式压缩完成。

最好针对第二步的resources节点做下单独介绍,首先,如果不配置该节点的话,执行mvn package后,js文件“并不会”被压缩。

有同学会问为什么“并不会”三个字要加引号? 我只能说:好问题!一下就问到点子上了!

首先,使用yuicompressor-maven-plugin插件后,js和css文件确实被压缩了(可以将outputDirectory配置到其他目录后查看输出文件),但最后为什么被还原到未压缩之前的内容了呢?那是因为yuicompressor-maven-plugin先将压缩后的文件编译到classes目录下,然后spring-boot-maven-plugin插件在编译打包jar的时候,又将原js和css文件重新编译(未压缩的原文件)了一份到classes目录下,所以就造成了打包后的js和css出现没有被压缩的问题。

那么通过resources节点指定了项目的资源文件,编译文件时则只会将resources中include指定的资源文件输出到classes目录中,这样就不会造成上面所说的覆盖问题了!

综上所述:上面这段都是我猜的!!!

另外,在参考资料中的(注1)和(注2)两篇文章中,就resources节点中include和exclude节点存在冲突的情况下优先以谁为准的问题,注1认为以include为准,注2认为要以exclude为准,在我本地测试的结果是以exclude为准的,所以我认同注2的观点。之所以两篇文章都列出来,是因为注1文章内容还不错。

最后有一点一定要注意:配置完成后,或者说文件压缩完成后,一定要在本地测一下!!!一定要测!!!一定要测!!!

老表!还等啥, 赶紧去试试吧!!!

参考资料

https://blog.csdn.net/bluishglc/article/details/6640889(注2)

§

§

码一码

一个专注于分享互联网开发技术的公众号。玩技术,我们是认真滴~~~

§

§

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180719G0Q35A00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券