使用yuicompressor-maven-plugin压缩JS、CSS

概述

  本文章为2019年第一篇文章,由于2018年比较繁忙,加上一些琐碎的事情,没有怎么更新文章,今天抽出一些时间来写一篇实用性的文章,帮助大家,总结自己,让我们共同成长。
  由于自己之前一直编写app后台,没有怎么接触过web应用,2018年开始逐渐接触web应用,目前比较流行的web后台开发模式为前后端分离模式,出现了很多优秀的前端框架,但是在很多小公司并不是很时髦,依然还是JSPJSJQUERY一把梭的时代,考虑到公司开发成本和人员学习成本及一些因素影响无法使用最新最时髦的方式,传统模式开发的项目速度上不如前后端分离开发速度快,且前端性能上也存在很多瓶颈,比如网页加载速度过慢,就一个慢其实已经毁所有了….
  既然web网页加载速度慢了,就要来寻找慢的主要原因,进行优化,经过分析发现前端脚本文件和样式文件大小在一定程度上决定了加载速度,于是开始对前端文件进行优化,方式就是压缩,压缩就要存在一个问题,那就是前端脚本和样式文件少还比较好解决,找个压缩网站,把源码放上去一个个压缩,然后放入.min.js文件,更改引用路径,可问题是如果脚本和样式文件太多了呢?那这就难办了~,但是聪明的人总是会有聪明的解决方式,如果我们有一个插件或者工具帮助我们自动进行转换呢,前端开发确实有很多优秀的压缩工具,但是,毕竟不是专业前端,搞不来,那只有看看在后端有没有解决方案了,答案是当然有了,接下来就轮到我们的主角上场了,它就是来自于雅虎的YUI Compressor

YUI Compressor

  YUI CompressorJava编写的是一个JavaScript压缩器,除了删除注释和空格外,还使用尽可能小的变量名来模糊局部变量。这种混淆是安全的,即使使用诸如evalwith之类的结构(尽管在那些情况下压缩不是最佳的)与jsmin相比,平均节省约20%YUI Compressor还能够安全地压缩CSS文件。

项目主页:https://yui.github.io/yuicompressor
github地址:https://github.com/yui/yuicompressor

yuicompressor-maven-plugin

  yuicompressor-maven-plugin是基于YUI Compressor 封装的maven plugin,使用它可以结合到我们的项目,来方便我们对项目js、和css进行压缩。

项目主页:https://davidb.github.io/yuicompressor-maven-plugin/

配置使用

  将yuicompressor-maven-plugin添加至maven项目pom.xml文件中,并根据自己的需求进行配置

<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可能的错误 -->
        <jswarn>false</jswarn>
        <!-- 若存在已压缩的文件,会先对比源文件是否有改动  有改动便压缩,无改动就不压缩 -->
        <force>false</force>
        <!-- 在指定的列号后插入新行 -->
        <linebreakpos>-1</linebreakpos>
        <!-- 压缩之前先执行聚合文件操作 -->
        <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>
        <!-- 以下目录和文件不会被压缩 -->
        <excludes>
            <exclude>**/*.min.js</exclude>
            <exclude>**/*.min.css</exclude>
        </excludes>
    </configuration>
</plugin>

  执行install命令,将在控制台看到如下输出:

  我们打开target目录,可以看到项目静态目录下压缩后的文件,点开查看,文件内容被压缩。

压缩后的文件

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×