上一章节我们介绍了,从浏览器向服务器获取资源时候,可以通过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,如需转载请自行联系原作者