前端项目中,强缓存和协商缓存的配置

前端缓存分为HTTP缓存和浏览器缓存

  1. HTTP缓存(本文重点)
    • 强缓存
    • 协商缓存
  2. 浏览器缓存
    • 比较熟悉的 cookie,localstorage sessionstorage indexDB...
    • 或者cacheStorage 请求的缓存,如果本地有取本地的

这里主要笔记http缓存

先说总结的内容

webpack配置(主要是文件名上有个hash值,便于服务器校验文件有没有修改)

使用hash的好处就是,使版本发布之后,使之前文件的强缓存失效

复制代码
module.exports = {
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
};

nginx配置 (主要是配置html文件不强缓存,别的文件使用强缓存+协商缓存)

复制代码
location / {
    root   www; # 访问根目录
    index  index.html index.htm; # 入口文件
}

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    # 启用强缓存的静态资源, 强缓存过期之后使用协商缓存
    expires 7d; # 设置缓存时间为7天
     if_modified_since before;
    add_header Cache-Control "max-age=604800, public"; # 设置强缓存
}

location ~* \.html$ {
    # 不启用强缓存的 HTML 文件
    expires off;
}
  • if_modified_since before 启用了 If-Modified-Since 验证,允许浏览器发送 If-Modified-Since 头部来验证资源是否已更改。
  • add_header Cache-Control 用于设置强缓存的 Cache-Control 头部,以便在资源的强缓存过期后,浏览器可以使用 If-Modified-Since 验证。
    这样配置允许浏览器在资源的强缓存过期后,发送 If-Modified-Since 头部的请求来验证资源是否需要更新。如果资源未更改,Nginx将返回状态码 304 (Not Modified),并且浏览器将使用本地缓存的资源。

总之,虽然强缓存是首选的缓存策略,但协商缓存仍然可以提供额外的性能优势,并减少不必要的网络请求,对于代理前端静态资源的Nginx配置仍然有用。

强缓存 (Cache-Control 和 Expires)

就是设置时间,时间不到就强制一直取本地的,设置了之后就不用跟服务器协商了

Expires 和 Chache-control 都是标识时间的字段,需要注意的是如果二者同时出现,Chache-control 的优先级是高于 Expires 。

但 Expires 是 HTTP1.0 的规范,时间格式是 GTM 字符串,如如果服务器时间和客户端时间差别较大时,会导致内存混乱。而服务器的时间和用户实际时间不正常是很正常的现象,所以在使用 Expires 的时候会出现一些问题,建议还是使用 Chache-control 来标识时间

Cache-Control 这个字段是 http 1.1 的规范,一般常用该字段的 max-age 值来进行判断,它是一个相对时间所以比较准确

配置方法
  • webpack 使用 asset-modules 的 output 配置中的 cache 字段来控制生成文件的缓存策略

    module.exports = {
    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    assetModuleFilename: '[name][contenthash][ext]',
    },
    };

这个配置使用了 [contenthash] 来生成文件名,这意味着如果文件内容没有改变,contenthash 也不会改变,从而利用浏览器的强缓存

  • Nginx 中设置强缓存

    location /static/ {
    alias /path/to/static/files;
    expires 30d; # 设置缓存时间为30天
    }

  • NodeJs

    const express = require('express');
    const app = express();

    app.use('/static', express.static('public', {
    maxAge: '30d', // 设置缓存时间为30天
    }));

协商缓存 (Last-Modified 和 ETag)

发请求到服务器,由服务器判断标签的值是不是最新的,是最新的就不返回内容,否则就返回内容

协商缓存是由服务器来决定,这个资源到底是否更新。整个过程也是涉及到两个字段。在第一次请求的 header 中会出现 Last-Modified 或是 Etag,注意是第一次请求的时候就会有,因为要通过这个字段来判断资源是否可用。

如果是 Etag 对应的是 if-None-Match 字段,是一段唯一标识符,告诉服务器本地缓存文件的最后修改时间。

如果是 Last-Modified 对应的是 if-Modified-Since 字段,是一段时间格式的字符串,比如是哈希值,服务端判断哈希是否一致。HTTP中并没有指定如何生成 ETag,这个由开发者自行决定。

以上两种,如果服务端判断一样,则返回 304 Not Modified,如果不一致则返回新的资源,并且更新本地缓存

配置方法
  • webpack 使用 output 配置的 filename 中添加 [contenthash] 来生成资源文件名,并生成 ETag 头部,从而启用协商缓存。

    module.exports = {
    output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    },
    };

  • Nginx 中设置强缓存

    location /static/ {
    alias /path/to/static/files;
    if_modified_since exact;
    add_header ETag "your_etag_value";
    }

  1. if_modified_since exact; 指示 Nginx 使用精确的 If-Modified-Since 验证,这意味着如果 Last-Modified 与请求头中的 If-Modified-Since 匹配,Nginx将返回状态码304。
  2. add_header ETag "your_etag_value"; 添加 ETag 头部到响应中,浏览器将与请求头中的 If-None-Match 进行比较。
  • NodeJs

    const express = require('express');
    const app = express();

    app.use('/static', express.static('public', {
    etag: 'your_etag_value',
    lastModified: true,
    }));

相关推荐
样子201834 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
数据狐(DataFox)1 小时前
SQL参数化查询:防注入与计划缓存的双重优势
数据库·sql·缓存
大只鹅2 小时前
Springboot3整合ehcache3缓存--XML配置和编程式配置
spring boot·缓存
持之以恒的天秤3 小时前
Redis—哨兵模式
redis·缓存
西岭千秋雪_5 小时前
Redis缓存架构实战
java·redis·笔记·学习·缓存·架构
weixin_404611346 小时前
关于微前端框架micro,子应用设置--el-primary-color失效的问题
前端框架
摸鱼仙人~7 小时前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
大只鹅8 小时前
两级缓存 Caffeine + Redis 架构:原理、实现与实践
redis·缓存·架构
如果'\'真能转义说8 小时前
React自学 基础一
前端·react.js·前端框架
患得患失9498 小时前
【前端】【React】【数字孪生】全解react使用threejs,@react-three/fiber,@react-three/drei
前端·react.js·前端框架