基于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文件。

说明

1. grunt build
2. grunt upload