前端静态资源缓存最优解以及max-age的陷阱

合理的使用缓存可以极大地提高网站的性能优势，还可以节约带宽从而降低服务器成本。但是很多站点有只弄对了一半或者一半都没有，如果是这样，就完全没有发挥出缓存的优势。很大程度上产生会由于静态资源的竞争关系而导致依赖的静态资源不同步。

以下为两个最佳静态资源缓存实践的例子。

一、资源内容不变 + 设置长时间max-age

// 设置缓存时间为1年
Cache-Control: max-age=31536000

• 资源的内容不会更改，所以。。。
• 浏览器/CDN可以缓存一年时间，在这期间资源不会出现问题。
• 可以在不请求服务器的请情况下，一年内都使用缓存内容。

第一天

浏览器请求了/index-v1.js、/base-v1.css以及/dog-v1.png这三个资源。

第二天

这次浏览器请求了/index-v2.js、/base-v2.css以及/dog-v1.png这三个资源。

此处注意：index.js和base.css与第一天请求的版本号不同。

过了一年

在一年的时间里，浏览器再也没有请求过/index-v1.js、/base-v1.css以及/dog-v1.png这三个资源，浏览器缓存就会把它们给删掉。

所以在这个例子中，为了让缓存发挥最大效率，你要做的并不是更改文件的内容，而是应该更改资源的URL：

<script src="/index-v3.js"></script>
<link rel="stylesheet" href="/base-v3.css">
<img src="/dog-v3.jpg" alt="…">

每一个静态资源URL都应该跟随其内容的修改而改变。例如示例index-v1.js中的v1，你对它的命名不需要有任何限制。它可以是一个版本号，最后修改的日期，或者根据内容计算出来的散列值。

绝大多数服务器端的框架都提供了工具来实现这一点，同样的在nodejs中有很多优秀的库来实现这个功能，比如gulp-rev、webp