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

背景

在我们使用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里面添加项就可以了（这里支持通配符）。

在chrome里面格式化显示压缩的js文件

有时候，我们看到其他网站的功能很不错的时候，总想去偷学一下，看见人家怎么实现的。

头疼的是，大多网站的js都是压缩过的，压缩之后不仅变量名变了，而且都串到一行去了，调试都调试不了。

chrome的调试工具很强大，它提供了一个格式化显示js文件的功能，格式化之后能够做到两点：1.js内容不再显示在一整行，而是规规矩矩的分开了多行显示；2.断点可以打在任何位置，并且能够单步调试。

是不是会爽快很多，那么这个功能在哪里呢？