Liferay 前端性能调优(4) 打包artifact时候启用yui-compressor

上一章节咱们介绍了，从浏览器向服务器获取资源时候，能够经过Gzip让浏览器拿到的是压缩的资源从而减小网络下载时间，那么咱们可否从源头上考虑呢，就是咱们从源头（资源自己）让资源尽量的小。

办法固然是有的，通常资源有css,js,p_w_picpath，咱们的思路是，对于css,js，咱们用yui-compressor来对其进行压缩，对于p_w_picpath，咱们将他们sprite成单个的大图从而减小网络请求次数。

yui-compressor，相信不少人都不陌生，它能够专门来压缩css,js，通常会去除其中的注释，空白行，合并语义相近的行等等，这里就不在赘述了。咱们由于构建分发包使用的都是maven,因此咱们就用maven的yui-compressor插件来完成这个任务。

具体配置以下：

只要在咱们的pom文件的<plugins>中加一个<plugin>以下：

...
<plugin>
                                    <groupId>net.alchim31.maven</groupId>
<artifactId>yuicompressor-maven-plugin</artifactId>
<version>${yui-compress-version}</version>
 <executions>
    <execution>                                                <phase>prepare-package</phase>
      <goals>                                                   <goal>compress</goal>
      </goals>
                                                <configuration>
                                                        <nosuffix>true</nosuffix>
                                                        <jswarn>false</jswarn>
                                                </configuration>
        </execution>
   </executions>
        </plugin>
 <plugin>
                                <groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
                                <version>${plugin.war.version}</version>
      <configuration>
                                        <warSourceExcludes>js/**, css/**</warSourceExcludes>
      </configuration>
  </plugin>
</plugins>

而后咱们运行的时候，就会自动看到在编译，单元测试完会执行压缩，最后在打包，由于咱们这个yuicompressor-maven-plugin 定义在maven-war-plugin 以前的：

从这里咱们能够显著的看出来，大多数js资源文件都有不一样程度的压缩。

测试：

那么到真实服务器上去访问这些资源是否还这样呢？咱们作个比较：

在压缩前：

在压缩后：

显然，全部请求的资源文件都变小了，速度也提升了。