no-cache 配置

no-cache 配置

• no-cache: 不是禁用缓存，是验证是否缓存的意思。(不严谨的理解)

在 index.html 中进行配置

• 只是影响浏览器对该 html 文件本身的存储行为：这些标签会告诉浏览器不要缓存 index.html 文件。
• 确保每次加载页面时都会获取最新的版本
• 仅影响 index.html 文件本身的缓存，而不会影响页面中引用的其他资源（如 CSS、JavaScript 等）的缓存行为。
• 对于其他资源的缓存控制通常需要在服务器响应头中进行设置。
• 【注意】：缓存对象是 HTML 文件本身。
• 【注意】：禁止缓存 html 文件，nginx 服务端还需要进行设置：不让缓存 index.html

<!--  1.html头部设置 -->
<meta
  http-equiv="cache-control"
  content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />

• 2.nginx 配置不缓存 index.html 文件如下

// 2.不缓存index.html文件
  location = /index.html {
    add_header Cache-Control "no-cache, no-store";
  }

• 3.js 文件配置 chunckhash、css 文件配置 contentHash
  文件名哈希值变化，则会被看做新的静态资源。需要在 webpack 的输出文件分别配置不同的哈希。

在 axios 请求头中设置 no-cache

• 这是一种客户端控制缓存的方式，浏览器会发出不带缓存头的请求，但服务器仍然可以决定是否遵循请求中的这个要求。

• 这仅影响特定请求，而不会影响服务器上其他资源的缓存策略。

• 这个设置影响 Axios 发送的 HTTP 请求，告诉服务器不要使用缓存的响应数据。
  这在请求特定资源时很有用，确保每次请求都能获取到最新的数据，而不是使用缓存的响应。

• 【注意】： 操作对象是控制请求的缓存。

• 哪些特定的请求需要设置？

axios({
  method: "get", // 或其他请求方法
  url: "你的请求URL",
  headers: {
    "Cache-Control": "no-cache", // 设置Cache-Control为no-cache
    // 其他请求头...
  },
});

服务端 nginx 设置 no-cache

• 这个设置影响 Nginx 服务器对所有资源的缓存策略，包括 HTML、CSS、JavaScript、图像等等。
• 通过在 Nginx 配置中设置缓存控制头，服务器可以指示客户端是否缓存响应以及缓存的时间。
• 这通常用于生产环境，以提高性能和减少服务器负载，但需要正确配置以确保不会导致问题，如过期的缓存。
  【注意】： 操作对象是服务器上所有资源的缓存策略。
• 服务端全局配至爱缓存

  // 3.服务端配置no-cache
  location = /xx（xx为你的代理的项目名） {
    add_header Cache-Control "no-cache, no-store";
  }
  // 如果nginx上有 proxy_cache 的配置，也考虑删掉，这是nginx的服务器缓存??
  

总结

上面设置虽然都是 no-cache,但是他们的缓存对象和缓存作用是不同的。

hash、chunkhash、contenthash - webpack 上的三种哈希配置

• 服务器上的静态资源在打包的时候一般会设置哈希值,哈希值跟内容相关。

hash

• 所有文件的哈希值都相同，一个文件改变了，所有文件的哈希值都会改变。无缓存作用。

chunkhash

• js 设置 chunkhash 的作用：A.js 文件的修改不影响 B.js 文件的哈希值；

contenthash

• js 引用 css 文件，修改 js 文件不会影响 css 文件的哈希值。但是修改 css 文件两种的哈希值都会变化。

module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js",
  },
  output: {
    filename: "[name].[chunkhash].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // 提取css插件
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
};