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

前端缓存分为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,
    }));

相关推荐
艾德金的溪4 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
我的offer在哪里5 小时前
Redis
数据库·redis·缓存
Qinana9 小时前
📚 论如何用代码谈一场不露脸的恋爱
前端·前端框架·html
RaidenLiu10 小时前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
合作小小程序员小小店15 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
你想考研啊15 小时前
二、redis集群部署(3主3从)
数据库·redis·缓存
顾漂亮15 小时前
Redis深度探索
java·redis·后端·spring·缓存
阿啄debugIT18 小时前
HashMap为什么线程不安全? ConcurrentHashMap如何保证线程安全? AQS如何实现锁的获取与释放?用男女关系进行解释,一看就懂
经验分享·职场和发展·系统架构·软件工程·1024程序员节
缘友一世19 小时前
Redis未授权访问漏洞:从原理到高级利用
数据库·redis·缓存
Dontla19 小时前
React useCallback介绍(用来缓存函数的引用,避免每次渲染都重新创建函数)主要用于性能优化
react.js·缓存·性能优化