基于GruntJS前端性能优化

在本文中，如何使用GruntJS为了使治疗简单的前端性能优化自己主动，我写了一个完整的样本放在Github上。能够參考一下。关于Yahoo的前端优化规则请參考：Best
Practices for Speeding Up Your Web Site

前端性能主要有图片的压缩。JS和CSS的合并、压缩。对全部静态文件的文件依据其内容加上hash，然后把CSS、HTML等文件里对全部的静态文件名称替换成加上hash的新文件名称。对全部的静态内容的路径上加上CDN的URL。最后将全部的静态文件上传到七牛CDN上去。以下我们按功能来说一下。

图片压缩

很多图片尤其是png图片有时候含有大量无意义的填充，添加图片的大小。我们能够通过contrib-imagemin对全部的图片进行压缩优化，从而减小图片的大小。

依据我们使用经验来看，一般能够压缩5％到10％左右。

JS和CSS的文件的合并压缩

合并JS和CSS能够大量的降低HTTP请求，达到优化前端性能的目的。

同一时候CSS和JS文件是静态文件，能够压缩到很小的大小。

GruntJS官方提供了contrib-concat,contrib-cssmin,contrib-uglify等相应的插件来做相应的事情。我们这里由于要文件名称的替换，使用了usemin插件，它会自己主动调用上述几个插件的。所以在我们的Gruntfile.js里并没有这3个插件的配置信息，而仅仅是在task列表里调用了这几个插件。

详细请參考：usemin。

静态文件缓存处理

为了最大程度的提高浏览器的载入速度，最好的方法是让浏览器将全部的静态文件都缓存在client。这里的缓存是指expire和cache-control的max-age，而不是Last-Modified。由于使用Last-Modified 和 If-Modified-Since还是会发出请求的，仅仅是没有更新就返回304状态码而max-age则是不会发出请求的，而是直接使用本地的缓存。

使用缓存的面临的一个比較在的问题是假设文件有更新假设清理缓存或者假设让用户下载最新的文件。

一种做法是静态文件加上版本，比如 style.css?v=1.1。这样的做法能够达到清除缓存的目的。可是维护起来相对麻烦。比較版本没有办法自己主动化，没有办法推断文件是否有更新。第二种做法是对文件内容进行hash。然后将hash值增加到文件名称中。比如style.abd1q2.css。这样就非常easy进行自己主动化处理。我们这里使用了yeoman开发的filerev插件，它能够对文件内容进行MD5运算，然后将运算后的hash加到文件名称中去，这样就非常easy推断文件是否被改动，同一时候它能够和usemin进行完美的结合起来。

Hash处理后文件名称的替换

对CSS和JS进行压缩合并以及对全部静态资源进行filerev处理后，原来HTML、CSS、JS等静态资源的引用文件名称就须要替换成新的文件名称了。比如HTML中对CSS和JS的引用，CSS中对图片的引用。我们使用了Yeoman开发的usemin进行替换。它的工作原理是，对须要处理的文件里的静态资源，在指定的目录查找经过filerev处理过的相应文件。假设找到则替换成相应的文件。

比如。我们在代码中对CSS的引用代码例如以下：<link
type="text/css" href="style.css">，usemin会在指定的目录以下寻找类似style.abd1q2.css的文件，假设找到则会把我们的CSS引用代码自己主动替换成：<link type="text/css" href="style.abd1q2.css">。

详细请參考：usemin。

CDN路径的替换

开发过程中对全部静态资源的引用都是指向项目自己的domain。假设要使用CDN，则须要将全部静态资源的引用Domain指向CDN的domain。这里使用GruntJS插件cdn来对全部静态资源进行全局替换。

上传静态资源到CDN

当以上步骤完毕后就能够将全部的静态文件上传到CDN了。

七牛官方提供了NodeJS的SDK,可是貌似比較难用。我们样例里使用了第三方开发的NodeJS模块qn，很easy，详见：qn。我的方法是画面和CSS／JS穿越了那里上传的文件夹，图片和CSS／JS加上不同的前缀分别为。由于7牛不具备的build文件夹内。见cdn.js文件。

说明

grunt build
grunt upload