大型web网站前端css\js\图片版本管理解决方案

前端页面加载过程

用户访问前端url链接时，会和本地已经缓存的url链接对比，如果一样，则会取本地前端文件进行渲染；如果不一样，则会向cdn发起请求，如果与cdn缓存的一致，则浏览器加载cdn里的url链接及文件进行渲染，否则由cdn向前端服务器发起请求，并加载这些文件，如图所示。



可能存在的版本问题

1、网站更新了，但是客户端却没有反映出更新？

如：有一个页面a.aspx，包含一个menu.css，页面中嵌入的链接为http://site/menu.css，如果是这样的链接的话，即使前端服务器上的样式更新了，客户端由于缓存的问题仍然无法及时的更新。

2、网站代码和前端文件无法有对应的版本？

如：由于网站规模大，前端文件都需要CDN来加速渲染，有些公司在代码级就将网站和前端文件进行分离，并把所有的前端文件在代码级放在一起。这里产生的问题是，网站的所有前端文件混合在一起，是一个整体版本，而网站的业务逻辑划分为一个个模块，发布的时候也是一个个部署的。当模块需要回退时，模块可以单独回退，而前端需要回退时，只能整体回退，或者选择相应的前端文件回退。最终造成版本混乱。

如何解决以上存在的版本问题

1、在前端文件url后面加md5值。如http://site/menu.cs?1309495796，它的好处是只要前端文件的内容发生改变，其对应的md5值就会不一样，如果页面中的url和缓存中的不一样，浏览器就会向前端服务器发起清楚，从而实时加载到最新的前端文件。后面会讲到md5如何生成。

2、网站业务模块代码应该和自己对应的前端文件放在一起，使用不同的文件夹进行区分，最好是每个模块的文件夹结构都标准化。模块build时，都会重新生成所有前端文件的md5，并将其保存在生成物中。模块发布时，将业务模块发到自己的部署服务器，而前端所有文件发送到前端服务器进行部署。业务模块回退时，相应的前端文件也能及时回退。

3、需要框架提供统一的代码模块来处理代码中的url，自动在前端url后加上md5值。

参考：

ruby asset pipeline

CDN技术介绍