云息的面试资料库

前端缓存最佳实践

https://juejin.im/post/5c136bd16fb9a049d37efc47

网站的缓存控制策略最佳实践及注意事项

前言

缓存控制是网站性能优化中至为常见及重要的一环，好的缓存控制，除了使网站在性能方面有所提升，在财务方面也有重要提升: 更好的缓存策略意味着更少的请求，更少的流量，更少的峰值带宽，从而节省一大笔服务器或者 CDN 的费用。

强缓存和协商缓存

在介绍缓存的时候，我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候，是否需要向服务器验证本地缓存是否依旧有效。顾名思义，协商缓存，就是需要和服务器进行协商，最终确定是否使用本地缓存。

两种缓存方案的问题点

强缓存

我们知道，强缓存主要是通过http请求头中的Cache-Control和Expire两个字段控制。Expire是HTTP1.0标准下的字段，在这里我们可以忽略。我们重点来讨论的Cache-Control这个字段。

一般，我们会设置Cache-Control的值为“public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。

显而易见，如果在xxx秒内，服务器上面的资源更新了，客户端在没有强制刷新的情况下，看到的内容还是旧的。如果说你不着急，可以接受这样的，那是不是完美？然而，很多时候不是你想的那么简单的，如果发布新版本的时候，后台接口也同步更新了，那就gg了。有缓存的用户还在使用旧接口，而那个接口已经被后台干掉了。怎么办？

协商缓存

协商缓存最大的问题就是每次都要向服务器验证一下缓存的有效性，似乎看起来很省事，不管那么多，你都要问一下我是否有效。但是，对于一个有追求的码农，这是不能接受的。每次都去请求服务器，那要缓存还有什么意义。

最佳实践

配置hash

**缓存的意义就在于减少请求，更多地使用本地的资源，给用户更好的体验的同时，也减轻服务器压力。**所以，最佳实践，就应该是尽可能命中强缓存，同时，能在更新版本的时候让客户端的缓存失效。

在更新版本之后，如何让用户第一时间使用最新的资源文件呢？机智的前端们想出了一个方法，在更新版本的时候，顺便把静态资源的路径改了，这样，就相当于第一次访问这些资源，就不会存在缓存的问题了。

因为该文件的内容发生变化时，会生成一个带有新的 hash 值的 URL。 前端将会发起一个新的 URL 的请求。

伟大的webpack可以让我们在打包的时候，在文件的命名上带上hash值。

entry:{
    main: path.join(__dirname,'./main.js'),
    vendor: ['react', 'antd']
},
output:{
    path:path.join(__dirname,'./dist'),
    publicPath: '/dist/',
    filname: 'bundle.[chunkhash].js'
}

综上所述，我们可以得出一个较为合理的缓存方案：

  • HTML：使用协商缓存。
  • CSS&JS&图片：使用强缓存，文件命名带上hash值。

三种哈希

  • hash：跟整个项目的构建相关，构建生成的文件hash值都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。

  • chunkhash：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。

  • contenthash：由文件内容产生的hash值，内容不同产生的contenthash值也不一样。

补充：后端需要怎么设置

上文主要说的是前端如何进行打包，那后端怎么做呢？ 我们知道，浏览器是根据响应头的相关字段来决定缓存的方案的。所以，后端的关键就在于，根据不同的请求返回对应的缓存字段。 以nodejs为例，如果需要浏览器强缓存，我们可以这样设置：

res.setHeader('Cache-Control', 'public, max-age=xxx');

如果需要协商缓存，则可以这样设置：

res.setHeader('Cache-Control', 'public, max-age=0');
res.setHeader('Last-Modified', xxx);
res.setHeader('ETag', xxx);

当然，现在已经有很多现成的库可以让我们很方便地去配置这些东西。 写了一个简单的demo，方便有需要的朋友去了解其中的原理，有兴趣的可以阅读源码

尽量减少资源变更Bundle Splitting：尽量减少资源变更

得益于单页应用与前端工程化的发展，经过打包后，基本上所有资源都是带有指纹信息的，这意味着所有的资源都是能够设置永久缓存。打包策略如下图所示：

缓存控制策略

但仅仅如此了吗？

如果你所有的 js 资源都打包成一个文件，它确实有永久缓存的优势。但是当有一行文件进行修改时，这一个大包的指纹信息发生改变，永久缓存失效。

所以我们现在需要做到的是：当修改文件后，造成最小范围的缓存失效。webpack 等打包工具虽然在 optimization 上内置了很多性能优化，但它不会帮你做这件事，这件事情需要自己动手。

缓存控制策略

此时我们可以对资源进行分层次缓存的打包方案，这是一个建议方案：

  1. webpack-runtime: 应用中的 webpack 的版本比较稳定，分离出来，保证长久的永久缓存
  2. react/react-dom: react 的版本更新频次也较低
  3. vendor: 常用的第三方模块打包在一起，如 lodash，classnames 基本上每个页面都会引用到，但是它们的更新频率会更高一些。另外对低频次使用的第三方模块不要打进来
  4. pageA: A 页面，当 A 页面的组件发生变更后，它的缓存将会失效
  5. pageB: B 页面
  6. echarts: 不常用且过大的第三方模块单独打包
  7. mathjax: 不常用且过大的第三方模块单独打包
  8. jspdf: 不常用且过大的第三方模块单独打包

随着 http2 的发展，特别是多路复用，初始页面的静态资源不受资源数量的影响。因此为了更好的缓存效果以及按需加载，也有很多方案建议把所有的第三方模块进行单模块打包。

答题思路

  • 前端缓存了解吗
    • 强缓存，协商缓存的概念，状态码
    • 何时强缓存，何时协商缓存
  • 如何做前端缓存？
    • webpack Splitting：分离第三方库
    • webpack 设置 contenthash
    • nginx 配置

拓展：前端部署演化史

总结

在做前端缓存时，我们尽可能设置长时间的强缓存，通过文件名加hash的方式来做版本更新。在代码分包的时候，应该将一些不常变的公共库独立打包出来，使其能够更持久的缓存。

← CSS 基础 →