用mvn实现打包时静态资源压缩

不去天涯 2016-12-24 11:46:53

2053

分类专栏：理清spring 文章标签： maven 资源压缩 compressor web工程

本文链接：https://blog.csdn.net/BuquTianya/article/details/53857653

版权

背景

在我们使用jquery、zepto、seajs、lazyload这些第三方js库的时候，总是能看到*-min.js的版本。

而且里面都是a,b,c,d,e,f,g这样的变量，在解析其他网站实现方式的时候，总是让人蛋疼。

这样做的目的就是为了压缩js文件，为什么能够起到压缩的效果呢？

比如，原来的变量名是var ohMyGodArray，压缩之后变成了var o，是不是一下子字节数就少了很多。而且，照这个思路的话，js里面变量数越少，重复使用度越高，压缩的比例越大。

那么，这怎么做呢？

使用maven实现

要实现压缩，需要用到yuicompressor-maven-plugin这个插件。

插件的功能就是在打包的时候把指定的资源文件压缩，放到目标目录里面。

看下xml配置，就明白了，用法很简单，在工程的pom.xml的project里面添加如下内容：

    <build>
        <finalName>myProject</finalName>
        <plugins> 
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.4</version>
                <configuration>
                    <warSourceExcludes>**/*.js,**/*.css</warSourceExcludes>
                </configuration>
            </plugin>

            <plugin>
                <groupId>net.alchim31.maven</groupId>
                <artifactId>yuicompressor-maven-plugin</artifactId>
                <version>1.3.0</version>
                <executions>
                    <execution>
                        <id>cpjscs</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <!-- 包含js文件和css文件 -->
                    <includes>
                        <include>**/*.js</include>
                        <include>**/*.css</include>
                    </includes>
                    <!-- 排除本来就压缩的js文件，比如jquery.min.js xxx-min.js之类的文件 -->
                    <excludes>
                    <exclude>**/*.min.js</exclude>
                        <exclude>**/*-min.js</exclude>
                    </excludes>
                    <encoding>utf8</encoding>
                    <failOnWarning>false</failOnWarning>
                    <force>true</force>
                    <nosuffix>true</nosuffix>
                    <linebreakpos>-1</linebreakpos>
                    <sourceDirectory>${basedir}/webapp</sourceDirectory>
                    <jswarn>false</jswarn>
                </configuration>
            </plugin>
        </plugins> 
    </build>

这里有几个需要说明的地方：

1.代表打包插件执行时，不放到目标目录的文件，否则会把yuicompressor插件压缩的js、css文件覆盖掉。

<warSourceExcludes>**/*.js,**/*.css</warSourceExcludes>

2.phase要设置为prepare-package，也就是yuicompressor插件在package执行之前运行。

<phase>prepare-package</phase>

可能遇到的问题

1.mvn install的时候遇到这样的错误

[ERROR] .../src/main/webapp/h5/cosmetic/js/wantOrder-cuc.js:line 267:column 26:invalid property id
                            package: data.data.weixin_package,

应该是js里面有yuicompressor定义的非法字符，我遇到的有两个，一个是package，一个是default。

这时候的处理方法，就是换成其他变量名，或者把这个js设置为不压缩（主要针对为第三方库的时候）。

设置不压缩，就在yuicompressor的excludes里面添加项就可以了（这里支持通配符）。