[FE] 静态资源的部署方案

（1）无缓存部署

index.html

<link rel="stylesheet" href="a.css" />
<div class="foo">foo</div>

a.css

.foo{
    color:red;
}

问题：浪费带宽

（2）304协商缓存

问题：还是要和服务器通信一次

（3）强制本地缓存

<u></u>cache-control/expires，不要和服务器通信
问题：无法更新资源

（4）通过更新资源的查询参数，更新缓存

index.html

<link rel="stylesheet" href="a.css?v=1.0.0" />
<div class="foo">foo</div>

问题：没有改变的资源也要同时更新
index.html

<link rel="stylesheet" href="a.css?v=1.0.1" />
<link rel="stylesheet" href="b.css?v=1.0.1" />
<link rel="stylesheet" href="c.css?v=1.0.1" />

（5）用数据摘要算法设置查询参数值

index.html

<link rel="stylesheet" href="a.css?v=0abc23" />
<link rel="stylesheet" href="b.css?v=e2fc94" />
<link rel="stylesheet" href="c.css?v=11dbf5" />

问题：包含静态资源的CDN节点，部署顺序问题
index.html

<link rel="stylesheet" href="http://static.xxx.com/a.css?v=0abc23" />

a.css

.foo{
    color:red;
}

先部署index.html，
则访问者会请求并缓存旧的a.css，页面错乱，再部署a.css也没有用了

先部署a.css，
有缓存的访问者页面不变，等部署了新index.html，统一更新
没有缓存的访问者会用旧页面加载新样式表，样式错乱，再部署新index.html，恢复正常

（6）采用非覆盖式发布

用数据摘要算法命名文件，新建一个更新的文件。
旧的资源a_0abc23.css，新的资源a_f02bc2.css

部署时，先上传新的资源a_f02bc2.css，再覆盖index.html

问题：该资源被其他资源引用的地址都得相应调整。