程序员盒子

Appearance

缓存介绍 ​

nginx配置缓存的优点：可以在一定程度上，减少服务器的处理请求压力。比如对一些图片，css或js做一些缓存，那么在每次刷新浏览器的时候，就不会重新请求了，而是从缓存里面读取。这样就可以减轻服务器的压力。

nginx可配置的缓存又有2种：

  • 客户端的缓存(一般指浏览器的缓存,一般有强缓存和协商缓存)。
  • 服务端的缓存(使用proxy-cache实现的)。

Nginx ​

在Nginx中配置强缓存，可以通过设置Cache-Control或者Expires HTTP头部来实现。以下是一些具体的配置方式：

1、设置Cache-Control头部，例如，你可以设置一个缓存时间为86400秒（约为1天）的公共缓存

js
  //html文件不设置强制缓存时间，协商缓存，使用 Last-Modified。no-cache 会发起往返通信来验证缓存的响应，但如果资源未发生变化，则不会下载，返回304
  location ~* \.(html)$ {
    add_header  Cache-Control  max-age=no-cache;
  }

  location / {
    add_header Cache-Control "public, max-age=86400";
  }

2、设置Expires头部，这也可以实现强缓存。例如，你可以设置所有的静态文件（例如.jpg，.jpeg，.png，.gif，.js，.css）的过期时间为1年

js
  //匹配后缀的文件设置强制缓存，且缓存的时间是360000秒，第一次访问的时候，从服务器请求，当除了第一次以外，再次刷新浏览器，会从浏览器缓存读取，那么强制缓存一般是从内存里面先读取，如果内存没有，再从硬盘读取
  location ~* \.(jpg|jpeg|png|gif|js|css)$ {
    expires 1y;
   }

3、解决




前端 ​

需要在静态资源后面添加动态参数，每次打包上线，这个动态参数值都要改变。

1、vue中配置 name代表入口文件的名称，hash代表每次构建的唯一hash值，chunkhash代表每个模块的唯一hash值。这样，每次构建时，都会给生成的文件添加一个唯一的hash值，相当于给文件添加了时间戳。

js
module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.output.filename('[name].[hash].js').end();
      config.output.chunkFilename('[name].[chunkhash].js').end();
    }
  }
}

2、在vite中配置

js
export default defineConfig((config) => {
  return {
    build: {
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          chunkFileNames: "assets/js/[name]-[hash].js",
          entryFileNames: "assets/js/[name]-[hash].js",
          assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
        },
      },
    },
  };
});

3、public文件夹下静态资源添加

方法一

js
  <script>
    var EDC_VERSION = '0.0.1';
    document.write("<link type='text/css' href='css/index.css?version=" + EDC_VERSION + "'  rel='stylesheet' />");
</script>

<script type="text/javascript">
    var EDC_VERSION = '0.0.1';
    document.write('<script src="script/index.js?version=' + EDC_VERSION + '" ><\/script>');
</script>

方法二

js
<script>
    // 获取当前的时间戳
    var timestamp = Date.now();

    // 创建一个新的link元素
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    // 将时间戳添加到URL后面
    link.href = 'style.css?ver=' + timestamp;
    document.head.appendChild(link);

    // 创建一个新的script元素
    var script = document.createElement('script');
    // 将时间戳添加到URL后面
    script.src = 'app.js?ver=' + timestamp;
    document.body.appendChild(script);
</script>


图示 ​

如图所示，发布新版本后会重新获取最新的资源，再次加载时，会在本地缓存中获取

c.png