概述
??本文章為2019年第一篇文章晕拆，由于2018年比較繁忙萝风，加上一些瑣碎的事情嘀掸，沒有怎么更新文章，今天抽出一些時(shí)間來寫一篇實(shí)用性的文章规惰，幫助大家睬塌，總結(jié)自己，讓我們共同成長歇万。
由于自己之前一直編寫app后臺(tái)揩晴，沒有怎么接觸過web應(yīng)用，2018年開始逐漸接觸web應(yīng)用贪磺，目前比較流行的web后臺(tái)開發(fā)模式為前后端分離模式硫兰，出現(xiàn)了很多優(yōu)秀的前端框架，但是在很多小公司并不是很時(shí)髦寒锚，依然還是JSP劫映、JS、JQUERY一把梭的時(shí)代刹前，考慮到公司開發(fā)成本和人員學(xué)習(xí)成本及一些因素影響無法使用最新最時(shí)髦的方式泳赋，傳統(tǒng)模式開發(fā)的項(xiàng)目速度上不如前后端分離開發(fā)速度快，且前端性能上也存在很多瓶頸喇喉，比如網(wǎng)頁加載速度過慢祖今，就一個(gè)慢其實(shí)已經(jīng)毀所有了....
既然web網(wǎng)頁加載速度慢了，就要來尋找慢的主要原因，進(jìn)行優(yōu)化千诬，經(jīng)過分析發(fā)現(xiàn)前端腳本文件和樣式文件大小在一定程度上決定了加載速度撒踪，于是開始對前端文件進(jìn)行優(yōu)化，方式就是壓縮大渤，壓縮就要存在一個(gè)問題制妄，那就是前端腳本和樣式文件少還比較好解決，找個(gè)壓縮網(wǎng)站泵三，把源碼放上去一個(gè)個(gè)壓縮耕捞，然后放入.min.js文件，更改引用路徑烫幕，可問題是如果腳本和樣式文件太多了呢俺抽？那這就難辦了~，但是聰明的人總是會(huì)有聰明的解決方式较曼，如果我們有一個(gè)插件或者工具幫助我們自動(dòng)進(jìn)行轉(zhuǎn)換呢磷斧，前端開發(fā)確實(shí)有很多優(yōu)秀的壓縮工具，但是捷犹，畢竟不是專業(yè)前端弛饭，搞不來，那只有看看在后端有沒有解決方案了萍歉，答案是當(dāng)然有了侣颂，接下來就輪到我們的主角上場了，它就是來自于雅虎的YUI Compressor
YUI Compressor
YUI CompressorJava編寫的是一個(gè)JavaScript壓縮器枪孩，除了刪除注釋和空格外憔晒，還使用盡可能小的變量名來模糊局部變量。這種混淆是安全的蔑舞，即使使用諸如eval或with之類的結(jié)構(gòu)（盡管在那些情況下壓縮不是最佳的）與jsmin相比拒担，平均節(jié)省約20％。YUI Compressor還能夠安全地壓縮CSS文件攻询。
項(xiàng)目主頁：https://yui.github.io/yuicompressor
github地址：https://github.com/yui/yuicompressor
yuicompressor-maven-plugin
yuicompressor-maven-plugin是基于YUI Compressor 封裝的maven plugin从撼，使用它可以結(jié)合到我們的項(xiàng)目，來方便我們對項(xiàng)目js蜕窿、和css進(jìn)行壓縮谋逻。
項(xiàng)目主頁：https://davidb.github.io/yuicompressor-maven-plugin/
配置使用
將yuicompressor-maven-plugin添加至maven項(xiàng)目pom.xml文件中，并根據(jù)自己的需求進(jìn)行配置
<plugin>
<!-- YUI Compressor Maven壓縮插件 -->
<groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>1.5.1</version>
<executions>
<execution>
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>
<configuration>
<!-- 讀取js,css文件采用UTF-8編碼 -->
<encoding>UTF-8</encoding>
<!-- 不顯示js可能的錯(cuò)誤 -->
<jswarn>false</jswarn>
<!-- 若存在已壓縮的文件桐经，會(huì)先對比源文件是否有改動(dòng) 有改動(dòng)便壓縮毁兆，無改動(dòng)就不壓縮 -->
<force>false</force>
<!-- 在指定的列號(hào)后插入新行 -->
<linebreakpos>-1</linebreakpos>
<!-- 壓縮之前先執(zhí)行聚合文件操作 -->
<preProcessAggregates>true</preProcessAggregates>
<!-- 壓縮后保存文件后綴 無后綴 -->
<nosuffix>true</nosuffix>
<!-- 源目錄，即需壓縮的根目錄 -->
<sourceDirectory>src/main/static</sourceDirectory>
<!-- 輸出目錄阴挣，即壓縮后的目錄-->
<outputDirectory>target/classes</outputDirectory>
<force>true</force>
<!-- 壓縮js和css文件 -->
<includes>
<include>**/*.js</include>
<include>**/*.css</include>
</includes>
<!-- 以下目錄和文件不會(huì)被壓縮 -->
<excludes>
<exclude>**/*.min.js</exclude>
<exclude>**/*.min.css</exclude>
</excludes>
</configuration>
</plugin>
執(zhí)行install命令气堕，將在控制臺(tái)看到如下輸出：
我們打開target目錄，可以看到項(xiàng)目靜態(tài)目錄下壓縮后的文件，點(diǎn)開查看茎芭，文件內(nèi)容被壓縮揖膜。
