转载自 前端缓存最佳实践
前端缓存的最佳实践
强缓存和协商缓存
强缓存
强缓存主要是通过http请求头中的Cache-Control和Expire两个字段控制。Expire是HTTP1.0标准下的字段。
一般，我们会设置Cache-Control的值为'public, max-age=xxx'，表示在xxx秒内再次访问该资源均适用本地的缓存，不再向服务器发起请求。
显而易见，如果在xxx秒内，服务器上面的资源更新了，客户端在没有强制更新的情况下，看到的内容还是旧的。
协商缓存
协商缓存最大的问题就是每次都要向服务器验证一下缓存的有效性，似乎看起来很省事，不管那么多，你都要问一下我是否有效。每次都去请求服务器，那要缓存还有什么意义。
最佳实践
缓存的意义就在于减少请求，更多的使用本地的资源，给用户更好的体验的同时，也减轻服务器压力。所以最佳实践，就应该尽可能命中强缓存，同时，能在更新版本的时候让客户端的缓存失效。
在更新版本后，如何让用户第一时间使用最新的资源文件呢？机智的前端想到一个办法，在更新版本的时候，把静态资源的路径改了，这样就相当于第一次访问这些资源，就不会有缓存的问题了。
伟大的webpack可以让我们打包的时候，在文件的命名上带hash值。
entry: {
main: path.join(__dirname, './main,js'),
vendor: ['react', 'antd']
},
output: {
path: path.join(__dirname, ',./dist'),
publicPath: '/dist/',
filename: 'bundle.[chunhash].js'
}
综上所述，我们可以得出一个较为合理的缓存方案：
- HTML： 使用协商缓存
- CSS & JS & 图片: 使用强缓存，文件名带上hash 值
哈希也有讲究
webpack给我们提供了三种哈希值计算方式，分别是hash、chunkhash和contenthash。那么这三种有什么区别呢？
- hash: 跟整个项目的构建相关，构建生成的文件hash值都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改
- chunkhash： 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。
- contenthash: 由文件内容产生的hash值，内容不同产生的contenthash值也不一样
当然我们是不会用第一种的。改了一个文件，打包之后，其他文件的hash都变了，缓存自然失效了。这不是我们想要的。
那chunkhash和contenthash的主要应用场景是什么呢？在实际项目中，我们一般会把项目中的css都抽离出对应的css文件来引用。如果我们使用chunkhash，当我们改了css代码之后，会发现css文件hash值改变的同时，js文件的hash值也会改变。这时候contenthash就派上用场了。
ETag计算
Nginx
Nginx官方默认的ETag计算方式是为‘文件最后修改时间16进制’。例： ETag: '59e72c84-2404'
Express
Express框架使用了server-static中间件来配置缓存方案，其中，使用了一个叫etag的npm包来实现etag计算。从源码可以看出，有两种计算方式：
- 方式一： 使用文件大小和修改时间
function stattag(stat) {
var mtime = stat.mtime.getTime().toString(16)
var size = stat.size.toString(16);
return ' " ' + size + '-' + mtime + ' " '
}
- 方式二：使用文件内容的hash值和内容长度
function entitytag(entity) {
if (entity.length === 0) {
// fast-path empty
return '"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"'
}
// compute hash of entity
var hash = crypto
.createHash('sha1')
.update(entity, 'utf8')
.digest('base64')
.substring(0, 27)
}
// compute length of entity
var len = typeof entity === 'string' ?
Buffer.byteLength(entity, 'utf8') :
entity.length;
return '"' + len.toString(16) + '-' + hash + '"'
Etag 与 Last-Modified谁优先
协商缓存，有Etag和Last-Modified两个字段。那当这两个字段同时存在的时候，会优先以哪个为准呢？
在Express中，使用了fresh这个包来判断是否是最新的资源。主要源码如下：
function fresh (reqHeaders, resHeaders) {
// fields
var modifiedSince = reqHeaders['if-modified-since']
var noneMatch = reqHeaders['if-none-match']
// unconditional request
if (!modifiedSince && !noneMatch) {
return false
}
// Always return stale when Cache-Control: no-cache
// to support end-to-end reload requests
// https://tools.ietf.org/html/rfc2616#section-14.9.4
var cacheControl = reqHeaders['cache-control']
if (cacheControl && CACHE_CONTROL_NO_CACHE_REGEXP.test(cacheControl)) {
return false
}
// if-none-match
if (noneMatch && noneMatch !== '*') {
var etag = resHeaders['etag']
if (!etag) {
return false
}
var etagStale = true
var matches = parseTokenList(noneMatch)
for (var i = 0; i < matches.length; i++) {
var match = matches[i]
if (match === etag || match === 'W/' + etag || 'W/' + match === etag) {
etagStale = false
break
}
}
if (etagStale) {
return false
}
}
// if-modified-since
if (modifiedSince) {
var lastModified = resHeaders['last-modified']
var modifiedStale = !lastModified || !(parseHttpDate(lastModified) <= parseHttpDate(modifiedSince))
if (modifiedStale) {
return false
}
}
return true
}
我们可以看到，如果不是强制刷新，而且请求头带上了if-modified-since和if-none-match两个字段，则先判断etag,在判断last-modified。
