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

§

§

码一码

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

§

§