怎样开发和部署前端代码

一个简单的前端项目：

上图是一个“简单”的 index.html 页面和它的样式文件 a.css ，用文本编辑器写好代码，无需编译，本地预览，确认OK，丢到服务器，等待用户访问。
OK了。

然后我们访问页面，看到效果，再查看一下网络请求，200。很OK。

---

看看那个 a.css 文件的请求吧，如果每次用户访问页面都要加载，是不是很影响性能，很浪费宽带，我们希望变成这样：

利用 304 ，让浏览器使用本地缓存。但，这样就够了吗？不行，304 叫协商缓存，这玩意还是要和服务器通信一次，我们希望更完美，所以必须彻底消灭掉这个请求，变成这样：

强制浏览器使用本地缓存（cache-control/expires），不要和服务器通信了。好了，现在网络请求优化已经做的很好了，那问题来了：你都不让浏览器发资源请求了，这缓存如何更新呢？

很好，相信有人想到了办法：通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源。就像这样：

下次上线，把链接地址改成新的版本，就更新资源了不是吗。OK，问题解决了吗？当然没有。。。
我们来看下面这种情况：

页面引用了 3 个 css ，而某次上线只改了其中的 a.css，如果所有链接都更新版本，就会导致 b.css 、c.css 的缓存也失效，那岂不是又有浪费了？！！

我们不难发现，要解决这种问题，必须让 url 的修改与文件内容关联，也就是说，只有文件内容变化，才会导致相应 url 的变更，从而实现文件级别的精确缓存控制。

什么东西与文件内容相关呢？我们会很自然的联想到利用数据摘要算法，对文件求摘要信息，摘要信息与文件内容一一对应，就有了一种可以精确到单个文件粒度的缓存控制依据了。好了，我们把 url 改成带摘要信息的：

这回再有文件修改，就只更新那个文件对应的 url 了，想到这里感觉很完美了。
但显示的情况是：现在互联网企业，为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到 CDN 节点上，网页中引用的资源也会变成对应的部署路径：

好了，当我要更新静态资源的时候，同时也会更新 html 中的引用，就好像这样：

这次发布，同时改了页面结构和样式，也更新了静态资源对应的 url 地址，现在要发布代码上线。
我想要你告诉我，是先部署页面，还是先部署静态资源？？
1、先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。

2、先部署资源，再部署页面：在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。

好的，上面的分析想说的是：先部署谁都不成！都会导致部署过程中发生页面错乱的问题。所以，访问量不大的项目，可以让研发同学苦逼一把，等到半夜偷偷上线，先上静态资源，再部署页面，看起来问题少一些。

这个奇葩问题，起源于资源的 覆盖式发布，用 待发布资源 覆盖 已发布资源，就有这种问题。解决它也好办，就是实现 非覆盖式发布。

看上图，用文件的摘要信息来对资源文件进行重命名，把摘要信息放到资源文件发布路径中，这样，内容有修改的资源就变成了一个新的文件发布到线上，不会覆盖已有的资源文件。上线过程中，先全量部署静态资源，再灰度部署页面，整个问题就比较完美的解决了。

所以，大公司的静态资源优化方案，基本上要实现这么几个东西：

1、配置超长时间的本地缓存    —— 节省宽带，提高性能
2、采用内容摘要作为缓存更新依据    —— 精确的缓存控制
3、静态资源CDN部署    —— 优化网络请求
4、更新资源发布路径实现非覆盖式发布    —— 平滑升级

全套做下来，就是相对比较完整的静态资源缓存控制方案了，而且，还要注意的是，静态资源的缓存控制要求在前端所有静态资源加载的位置都要做这样的处理。是的，所有！js、css，还要包括js、css文件中引用的资源路径，由于涉及到摘要信息，引用资源的摘要信息也会引起引用文件本身的内容改变，从而形成级联的摘要变化，大概示意图就是：

好了，目前我们快速的学习了一下前端工程中关于静态资源要面临的优化和部署问题，新的问题来了：这让工程师怎么写码啊！

现在比较成熟的持久化缓存方法就是在静态资源的名字后面加 hash 值，因为每次修改文件生成的 hash 值不一样，这样做的好处在于增量式发布文件，避免覆盖掉之前文件从而导致线上的用户访问失效。

因为只要做到每次发布的静态资源（css,js,img）的名称都是独一无二的，那么我就可以：

• 针对 html 文件：不开启缓存，把 html 放到自己的服务器上，关闭服务器的缓存，自己的服务器只提供 html 文件和数据接口。
• 针对静态的js，css，图片等文件：开启 cdn 和缓存，将静态资源上传到 cdn 服务商，我们可以对资源开启长期缓存，因为每个资源的路径都是独一无二的，所以不会导致资源被覆盖，保证线上用户访问的稳定性。
• 每次发布更新的时候，先将静态资源（js,css，img）传到 cdn 服务上，然后再上传 html 文件，这样既保证了老用户能够正常访问，又能让新用户看到新的页面

上面大致介绍了下主流的前端持久化缓存方案，那么，我们为什么需要做持久化缓存呢？
1、用户使用浏览器第一次访问我们的站点时，该页面引入了各式各样的静态资源，如果我们能做到持久化缓存的话，可以在 http 响应头加上 cache-control 或 Expires 字段来设置缓存，浏览器可以将这些资源一一缓存到本地。
2、用户在后续访问的时候，如果需要再次请求同样的静态资源，且静态资源没有过期，那么浏览器可以直接走本地缓存而不用再通过网络请求资源。