解决客户端缓存的问题

旧城等待， 2022-11-27 00:51 224阅读 0赞

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

# 为什么会缓存？ #

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

# 解决思路 #

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

## 情况一 ##

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

**解决思路**

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

`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`文件。

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关在Windows DNS 客户端上禁用 DNS 客户端缓存

含客户端 DNS 缓存。客户端 DNS 缓存功能可能会产生错误的印象，即 DNS "轮循机制" 负载平衡不会从 DNS 服务器发生到 Windows 客户端计算机。使用 p

我会带着你远行/ 2023年10月06日 09:14/ 0 赞/ 33 阅读

相关缓存：客户端缓存。

客户端缓存相对于其他端的缓存而言，要简单一些，而且通常使和服务端以及网络侧的应用或缓存配合使用的。对于互联网应用而言，也就是通常所说的所说的BS架构应用，可以分为页面缓存和浏览

Bertha 。/ 2023年05月30日 09:18/ 0 赞/ 24 阅读

相关 LocalCache客户端缓存本地缓存的实现

LocalCache，也被称为客户端缓存或者本地缓存。某些业务场景上，并不需要搭建一套复杂的分布式缓存如redis，只需要在单机上维护一套缓存配置即可。可以自己设计实现

阳光穿透心脏的1/2处/ 2022年12月15日 03:58/ 0 赞/ 244 阅读

相关架构：客户端缓存。

客户端（浏览器）缓存客户端缓存的缺点客户端缓存减少了的服务器请求，避免了文件重复加载，显著地提升了用户地方。但是当网站发生了更新的时候（如替换了css、js以及

「爱情、让人受尽委屈。」/ 2022年12月08日 01:52/ 0 赞/ 212 阅读

相关架构：客户端缓存。

浏览器缓存首先，限定在get请求由于浏览器缓存涉及到的应用比较多，所以针对不同的应用和版本效果也会有差异浏览器：chrome 服务器：nginx 在系统中不常改

「爱情、让人受尽委屈。」/ 2022年11月27日 07:18/ 0 赞/ 229 阅读

相关解决客户端缓存的问题

缓存分为服务端缓存和客户端缓存，服务端缓存一般都是让运维去清理一下缓存，剩下来的缓存就需要前端或者前端和后台协同解决了。为什么会缓存？浏览器的缓存真的是让人又爱又恨

旧城等待，/ 2022年11月27日 00:51/ 0 赞/ 225 阅读

相关 jsp页面禁止客户端缓存

<% response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Contro

太过爱你忘了你带给我的痛/ 2022年08月27日 13:46/ 0 赞/ 178 阅读

相关在客户端缓存Servlet的输出

在客户端缓存Servlet的输出　　对于不经常变化的数据，在servlet中可以为其设置合理的缓存时间值，以避免浏览器频繁向服务器发送请求，提升服务器的性能。例如：

小灰灰/ 2022年05月27日 00:48/ 0 赞/ 184 阅读

相关禁用 aspx页面的客户端缓存

默认情况下，IE打开一个网页，会在本地进行缓存，这样是为了减少访问服务器的次数提高性能。但有时这也给我们带来了弊端，比如修改信息的页面，在提交修改后，再次打开次页面，因为UR

àì夳堔傛蜴生んèń/ 2022年05月25日 10:19/ 0 赞/ 204 阅读

相关【Redis缓存】- Java客户端Jedis

目录一、概述二、Jedis 操作 Redis 中的数据结构 1、字符串类型 string 2、哈希类型 hash 3、列表类型 list 4、集合类型 set

青旅半醒/ 2021年09月20日 23:46/ 0 赞/ 446 阅读