我们再开发web项目时，经常会遇到修改了css、js、html等静态文件，并部署到服务器之后。使用浏览器进行访问的时候，发现并没有什么变化，这就是静态缓存。我们应该如何处理静态缓存呢？首先我们先了解什么是静态缓存。
静态缓存
静态缓存，一般指web类应用中，将图片、js、css、视频、html等静态文件/资源通过磁盘/内存等缓存方式，提高资源响应方式，减少服务器压力/资源开销的一门缓存技术。大致可以分为浏览器缓存、服务端缓存、CDN等
一、浏览器缓存
浏览器缓存，也称为客户端缓存，常用方式如下
html文件添加Expires时间
<meta http-equiv="Expires" content="60">
二、服务端缓存
服务端缓存可以分为内存缓存、磁盘缓存两种。以nginx为例：
#要缓存文件的后缀，可以在以下设置。
http{
proxy_connect_timeout 10; #服务器连接的超时时间
proxy_read_timeout 180; #连接成功后,等候后端服务器响应时间
proxy_send_timeout 5; #后端服务器数据回传时间
proxy_buffer_size 16k; #缓冲区的大小
proxy_buffers 4 32k; #每个连接设置缓冲区的数量为number，每块缓冲区的大小为size
proxy_busy_buffers_size 96k; #开启缓冲响应的功能以后，在没有读到全部响应的情况下，写缓冲到达一定大小时，nginx一定会向客户端发送响应，直到缓冲小于此值。
proxy_temp_file_write_size 96k; #设置nginx每次写数据到临时文件的size(大小)限制
proxy_temp_path /tmp/temp_dir; #从后端服务器接收的临时文件的存放路径
proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=10g; #设置缓存的路径和其他参数。被缓存的数据如果在inactive参数（当前为1天）指定的时间内未被访问，就会被从缓存中移除
server {
listen 80 default_server;
server_name localhost;
root /mnt/blog/;
location / {
}
#要缓存文件的后缀，可以在以下设置。
location ~ .*\.(gif|jpg|png|css|js)(.*) {
proxy_pass http://localhost:9090; #nginx缓存里拿不到资源，向该地址转发请求，拿到新的资源，并进行缓存
proxy_redirect off; #设置后端服务器“Location”响应头和“Refresh”响应头的替换文本
proxy_set_header Host $host; #允许重新定义或者添加发往后端服务器的请求头
proxy_cache cache_one; #指定用于页面缓存的共享内存，对应http层设置的keys_zone
proxy_cache_valid 200 302 24h; #为不同的响应状态码设置不同的缓存时间
proxy_cache_valid 301 30d;
proxy_cache_valid any 5m;
expires 90d; #时间
add_header wall "cache"; #报头设置自定义的信息
}
}
# 无nginx缓存的blog端口
server {
listen 9090;
server_name localhost;
root /mnt/blog/;
location / {
}
}
}
三、CDN缓存
CDN是静态缓存加速最典型的代表。CDN技术并不是一门新的技术，它是基于传统 nginx、squid、varnish 等 web 缓存技术，结合 DNS 智能解析的静态缓存加速技术。
-
节点缓存
对需要加速的网站应用，相应的静态资源通过内存缓存+磁盘缓存的方式缓存在服务器端。
-
精准调度
对访问的用户 ip 进行智能解析调度，实现就近缓存节点访问。如果某一台CDN服务器缓存了www.test.com网站数据，当有人访问这台CDN时，就不会再去拉取数据了。
如何解决静态缓存
我们已经了解了什么是静态缓存，那我们应该怎么去处理这些缓存呢。
1.解决浏览器缓存
在html文件head标签中添加以下代码：
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
2.服务端缓存
去掉服务端缓存的相关代码即可
3.CDN缓存
CDN缓存比较头疼，那我们应该如何去处理CDN缓存。
所有的静态文件都添加时间戳
<script src="https://www.test.com/main.js?v=1623375509210"></script>
<link rel="stylesheet" href="./static/index.776c78d1.css?v=1623375509210">
因为所有的静态文件都要加上时间戳，每次都需要去调整，可以直接使用js代码去引用相关文件
function loadScript(src) {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = src + "?v=" + (new Date()).getTime();
oHead.appendChild(oScript);
}
function loadLink(src) {
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += `<link rel="stylesheet" href="${src}?v=${(new Date()).getTime()}">`;
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}
loadScript("./static/js/chunk-vendors.js")
loadScript("./static/js/index.js")
loadScript("./static/css/index.css")
Vue解决缓存
由于vue-cli打包vue文件的时候静态文件会默认会带有hash值，我们首先要去掉hash值。我们只需要修改vue.config.js中的代码：
方式一：
这种方式使打包生成的js文件不带有hash值，但是index.html文件中的引用也没有带时间戳，即：
// vue.config.js
module.exports = {
// ... webpack 相关配置
filenameHashing: false
}
<script src="./static/js/chunk-vendors.js"></script>
<script src="./static/js/index.js"></script>
方式二：
这种方式使打包生成的js文件不带有hash值，但是index.html文件中的引用也没有带时间戳，即：
// vue.config.js
let filePath = ''
let Timestamp = new Date().getTime()
module.exports = {
// ... webpack 相关配置
filenameHashing: false,
configureWebpack: { // webpack 配置 解决js缓存的问题，目前只适配H5端打包
output: { // 输出重构 打包编译后的 文件目录 文件名称 【模块名称.时间戳】
filename: `${filePath}[name].js?v=${Timestamp}`,
chunkFilename: `${filePath}[name].js?v=${Timestamp}`
},
}
}
Uniapp解决缓存
uniapp解决缓存的方式与vue一样，但是uniapp兼容了很多平台，所以修改vue.config.js又不太一样。如果uniapp根目录下面没有vue.config.js，则新建vue.config.js文件即可。
// vue.config.js
if (process.env.UNI_PLATFORM === 'h5') {
// 由于这种方式的打包，会导致编译生成微信小程序（只验证了微信小程序）无法正常使用，所以必须分开
let filePath = ''
let Timestamp = new Date().getTime()
module.exports = {
// ... webpack 相关配置
filenameHashing: false,
configureWebpack: { // webpack 配置 解决js缓存的问题，目前只适配H5端打包
output: { // 输出重构 打包编译后的 文件目录 文件名称 【模块名称.时间戳】
filename: `${filePath}[name].js?v=${Timestamp}`,
chunkFilename: `${filePath}[name].js?v=${Timestamp}`
},
}
}
}else{
// 其他打包需要的相关配置
module.exports = {
// ... webpack 相关配置
filenameHashing: false
}
}
<script src="./static/js/chunk-vendors.js?v=1623379610369"></script>
<script src="./static/js/index.js?v=1623379610369"></script>
