解决客户端缓存的问题

缓存分为服务端缓存和客户端缓存，服务端缓存一般都是让运维去清理一下缓存，剩下来的缓存就需要前端或者前端和后台协同解决了。

为什么会缓存？

浏览器的缓存真的是让人又爱又恨，他可以帮助我们加快页面响应速度，同时也会带来开发中的困难。当浏览器读取相同的文件名时，浏览器会去读取缓存中的文件，而不是从服务端读取文件，这样就造成了服务端修改了页面客户端确迟迟不显示。

解决思路

让浏览器读取的文件名每次都不一致就可以解决客户端缓存的问题。

情况一

图片是由后台传输的，但是每次返回的地址是一样的，这样就算服务器更换了文件，客户端还是不会显示。

解决思路

让客户端每次读取的图片地址不一致，服务端更新图片是返回图片路径增加一个时间戳。

http://www.xxx.com/logo.png

http://www.xxx.com/logo.png?t=2214655121635

情况二

下面说的情况就是大多数人想要看到的情况，源代码都发生改变了，客户端就是不变，真是让人头疼。

这是时候我们可以运用我们的webpack打包工具了，每次时创建不同的文件名，这样客户端就回去读取最新的文件了。
还是以 Dva Cli 为例，我们在 .webpackrc 中添加hash属性

{
	// ...
	"hash": true
	// ...
}

这时打包就会发现文件名全部带上了hash值，你会高兴的将打包好的文件发给运维，正当你得意洋洋准备打开页面查看时，页面竟然报错进不去了。

原来是应为你打包了但是页面并没有去引用他，这个时候我们就有两种情况解决，第一手动引入，改变html引入的css和js文件，但是我们是不可能这么做的，我们需要再次配置webpack打包。

删除 ./public/index.html 文件，在 ./src 页面下创建 index.ejs 文件，内容和./public/index.html 文件一致，但是记得删除到引用的css和js。

{
	// ...
	"hash": true,
	"html": {
	   "template": "./src/index.ejs"
	 },
	// ...
}

然后我们在 .webpackrc 文件中配置html的模板，再次打包就可以发现html自动引入了含有hash的css和js文件。