Spike先生是BestExperience公司IT运营部总监，他的团队成功使用HttpCache优化了前端项目。Spike将通过三个场景展示他的团队如何做到这一点：通过配置HttpCacheExpire来降低访问压力并改善用户体验使用版本控制强制使本地过期缓存失效使用内容摘要更精确地命名文件控制缓存并实现非覆盖发布***第一个故事：我不要那么多服务器和带宽。BestExperience面临资源访问压力和用户体验问题。随着BestExperience提供的前端应用越来越强大，Spike的压力也越来越大：为了应对来自静态资源的访问压力，IT部门不断采购服务器和带宽。糟糕的用户体验驱使用户访问竞争对手的网站。工程师们只是通过应用Minify、AMD、打包、Gzip等手段优化了前端页面的体验，最终得到了如下图所示的资源引用关系：“还有很多东西要下载，我该用什么来挽救这该死的延迟？？”——斯派克看着图片想着，突然想起：早些年，雅虎发布了《关于优化前端体验的35条建议和指导》，第三条是：“AddanExpiresoraCache-ControlHeader”。雅虎是这样描述这个建议的：网页设计越来越丰富，这意味着页面中的脚本、样式表、图像和Flash越来越多。首次访问您的页面的访问者可能必须发出多个HTTP请求，但是通过使用Expires标头，您可以使这些组件可缓存。这避免了对后续页面视图的不必要的HTTP请求。Expires标头最常用于图像，但它们应该用于所有组件，包括脚本、样式表和Flashrowanders（.proxies）使用缓存来减少HTTP请求的数量和大小，从而使网页加载速度更快。“这正是我一直在寻找的灵丹妙药”——斯派克得意地笑着。于是，斯派克以IT部门老大的身份写下了第一个技术故事：作为IT部门老大：希望通过应用HTTP缓存技术来复用下载的资源，减少用户在浏览页面时带来的不便必要的HttpRequest.这样既提高了用户浏览页面的体验，又减轻了对公司服务器资源的访问压力。并找到了工程师汤姆。ExpireTom带来的美好生活刚刚参与了上一轮的优化工作。虽然成绩斐然，但他并不满足。当汤姆看到吉姆写的故事时：“这个方法太棒了！我什至可以在登录页面的底部放置对其他页面资源的引用。提高用户整个网站的浏览体验。”——汤姆的小宇宙瞬间炸开，新的优化方案迅速完成。Best-Experience用户下次浏览该页面时，会通过这种方式下载资源。以图片bgimage.png为例：当用户第一次获取图片时，HttpRequest如图：当用户稍后再次获取图片时，则可以从浏览器的缓存中读取数据.由于采用了Http缓存方案，用户反馈越来越好，访问量增加；IT部门不需要那么多服务器和带宽。首席财务官邀请斯派克共进晚餐并谈论他在希腊的假期。“我觉得我也应该去圣托里尼度假，好好犒劳一下自己”——斯派克开心地想。第二个故事：Invalidationcache是??个技术问题。我们已经修复了这个错误！有一天，QATyke发现最新一轮发布的前端应用并没有包含很多新功能。Jerry承诺在本月发布后已经上线，并已经过测试。经过一番折腾，Jerry发现浏览器一直在使用旧的缓存，而不是最新的版本。斯派克打电话给杰瑞和汤姆，他们三人手动重命名了引用的资源并进行了紧急修复。“没有灵丹妙药，我的圣托里尼！”——斯派克头疼地想。Spike、Jerry、Tom和Tyke坐在一起得出了一个新的结论：在前端项目中缓存资源时，需要考虑缓存有效性的问题。虽然35条建议和指南建议“ConfigureETags”，但是很难确定静态资源缓存的有效期虽然Http缓存可以支持No-Cache或者max-age=0来保证浏览器验证缓存对服务器的有效性每次都这样，但是这样会大大增加服务器的压力。可以增加资源引用如：<....src="###.js?v=$version$">版本控制方法强制浏览器更新缓存。斯派克以IT部门老大的身份写了一篇新的技术故事：希望对前端系统中引用的静态资源进行版本管理。通过Http缓存不仅可以提升用户体验，减轻服务器压力，还可以方便用户实时获取更新的资源。“都十月了，好像去不了圣托里尼了，总觉得这个计划有问题”——斯派克不安。使用版本机制保证浏览器更新资源Jerry和Tom（很难想象他们是如何合作的）最终在前端项目中实现了自动资源版本管理：当用户第一次访问页面时，会得到这样一个资源引用:而新版本上线后，用户会得到这样的资源参考：第三个故事：缓存管理更精准，升级更流畅（本案例来自知乎大公司如何开发部署前端代码？张云龙的回答，涉及到之前故事的内容）11月发布后，每次更新后的高峰期，运维人员Nibbles找到斯派克，“这次上线后，服务器的压力突然变大了很多。时间都花在了下载资源上”，斯派克找到汤姆、杰瑞、泰克和尼布尔斯，几个人坐在一起分析原因：“这是因为11月份的部署完成后，前端应用引用的资源版本升级，导致所有缓存失效”——Tom想了想说，“所有资源引用？我以为我们可以准确更新每个文件”——Nibbles很惊讶，“如果每个资源的版本都单独标注，那么根据我们实际情况来看，每次上线访问压力都不会那么大”-Tyke“我之前看到WebPack做到了”-Jerry热情地说。”他们使用的是文件摘要的方法，就是用MD5对文件进行评估。如果两个文件相同，那么会得到相同的hash值；如果文件不同，那么会得到不同的hash值得到"——Jerry"我们可以把这些文件的hash值作为版本号，像这样"——Jerry"能不能通过文件名做版本管理，我想知道这次部署要去掉哪些文件还有哪些是新的”——Nibbles“这个有什么问题吗？”——斯派克疑惑“明年不是要做CDN吗？静态资源和页面文件会放在不同的服务器上，而且是同一批次的页面文件和静态资源很难实现本次更新，且CDN资源生效有延迟》——Nibbles（CDN和非覆盖部署请参考张云龙的Howtodevelopanddeployment大公司的前端代码？和前端工程的CDN部署）“好吧，就这样吧，我去回来写故事。”-斯派克的最后一句话。“幸运的是，我们之前用过WebPack，所以很容易”——JerrySpike作为IT部门的老板写了第三个故事：希望用文件哈希来命名静态资源文件，这样就可以根据文件控制缓存和部署“我认为这是最后一个故事”-Spike越来越乐观。过渡到非覆盖部署-Dzogchen？具体如何应用WebPack的过程不再赘述。图片来源前端代码在大公司是如何开发部署的？这样，Nibbles就可以愉快地通过文件名对比来分析每次部署变化的内容；而BestExperience未来的上线流程也将改为：将添加的静态资源文件发布到静态资源服务器，验证新增的静态资源是否正确。发布服务器暂时下线，替换html文件等。删除无用的静态资源文件“终于，我们可以踏踏实实地庆祝圣诞节了”——斯派克看着日历。Summary斯派克的总结年终了，斯派克在年终总结中写道：未来在前端工程的实现中，我们可以：配置一个永不过期的本地缓存——节省带宽，提升用户体验体验精准的缓存控制使用CDN——减少用户请求资源时解析DNS的延迟使用文件摘要作为文件名——实现非重叠部署，减少宕机时间格式、缓存设计、CDN等方案之间的因果总结：如果考虑到项目开发阶段，那么这将是一个更复杂的软件工程问题。在这个问题域中，还需要包含文件压缩、合并、打包、重命名、目录设置等问题。幸运的是，Gulp、Webpack、FIS、AMD、RequireJS等工具和相应的插件可以帮助我们。WebPack提供了Hash、ChunkHash和ContentHash，而社区提供了MD5-Hash。当然，这些都是关于工具的话题，这次主要是讲工程。谈及前端集成解决方案，提到了前端领域的8个技术要素和分类，还是挺有意思的。【本文为专栏作家《ThoughtWorks》原创稿件，微信公众号：Thinkworker，转载请联系原作者】点此查看该作者更多好文
