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

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

你可能感兴趣的:(1024程序员节,缓存,前端框架,项目,可用性测试)