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

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

办法当然是有的，一般资源有css,js,image，我们的思路是，对于css,js，我们用yui-compressor来对其进行压缩，对于image，我们将他们sprite成单个的大图从而减少网络请求次数。

yui-compressor，相信很多人都不陌生，它可以专门来压缩css,js，一般会去除其中的注释，空白行，合并语义相近的行等等，这里就不在赘述了。我们因为构建分发包使用的都是maven,所以我们就用maven的yui-compressor插件来完成这个任务。

具体配置如下：

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

... < 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资源文件都有不同程度的压缩。

测试：

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

在压缩前：

在压缩后：

显然，所有请求的资源文件都变小了，速度也提高了。

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/1213128，如需转载请自行联系原作者