缓存方案
emm…我觉得我学东西就和js的原型链一样，怎么学着学着奇怪的知识就增加了…本来要学的东西一直被挂起….
强制缓存
实现方式
强制缓存是通过http请求头里的Cache-Control和Expire字段来控制。
Expires是HTTP1.0标准下的字段，所以暂时忽略吧。
以node.js为例:
一般我们这样设置res.setHeader('Cache-Control', 'public, max-age=xxx');，代表xxx秒内访问该资源，均使用本地缓存，不在向服务器发起请求。
缺点
如果在xxx秒内，服务器更新了资源，客户端在没有强制刷新的情况下获取到的还是旧的资源。
如果后端发布了新版本，弃用了部分旧的接口，但是客户端由于缓存的存在，还是会调用旧的接口。。
协商缓存
实现方式
Etag和Last-Modifie
每次都要向服务器验证一下缓存的有效性。
缺点
很麻烦，缓存失去了意义。
混合使用
HTML：使用协商缓存。
Etag:
Etag响应头字段表示资源的版本，浏览器在发送请求时会带If-None-Match头字段， 来询问服务器该版本是否仍然可用。如果服务器发现该版本仍然是最新的， 就可以返回 304 状态码指示 UA 继续使用缓存。Last-Modified:与
Etag类似，Last-ModifiedHTTP 响应头也用来标识资源的有效性。 不同的是使用修改时间而不是实体标签。对应的请求头字段为If-Modified-Since。
CSS&JS&图片：使用强缓存，文件命名带上hash值。
webpack的hash
hash
hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值
chunkhash
它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。
contenthash
如果index.css被index.js引用了，如果index.js更改了代码，css文件就算内容没有任何改变，由于是该模块发生了改变，导致css文件会重复构建。
这个时候，我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。
ps: 因为还没学过webpack和前端构建的东西，这里只是一个知识结构的目录，后面学到再展开。
参考链接：