现在浏览器或者系统访问网页都会有自己的一套缓存机制，这就可能会导致前端代码已经更新了，但是用户还是访问了之前的缓存

这里介绍下用nginx处理这个问题的方法，这里配置html和htm文件不缓存

server {
        listen       80;
        server_name  test.exmaple.cn;
        location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                   add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                root /web/;
                index index.html;
                try_files $uri $uri/ /index.html =404;
上面我们只配置了不缓存html和htm，js,css等文件没有做处理，是因为我们前端编译发布代码时，如果某个js或css有更新，会自动在文件名上加时间戳、哈希值，这样一发新版时，只要客户端请求了新版的html，就会自动找到新的js、css，没有更新的js、css还会继续用缓存，这样既不会太大的影响网页的访问速度，也能保证更新的代码不走缓存
                    现在浏览器或者系统访问网页都会有自己的一套缓存机制，这就可能会导致前端代码已经更新了，但是用户还是访问了之前的缓存。这里介绍下用nginx处理这个问题的方法，这里配置html和htm文件不缓存server {listen       80;server_name  test.exmaple.cn;    location / {            if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件    
				
一直很想学习缓存这一块儿的东西，毕竟前端性能优化缓存在其中占了很大一部分作用。缓存分为两种：强制缓存和协商缓存。看过很多文章讲它们之间的区别，但是没有实战过只知道其意义却不知道怎样去设置，没有实战过也导致记忆总是很模糊，实践才是最好的老师！记录一下我使用nginx服务器学习缓存的过程。
首先我在 nginx 的根目录下新建了一个 index.html 文件以及 index.js 文件。此时 nginx 的配置文件是长这个样子的：
server {
 listen  8080;
 server_name localhost;
 location / {
  root /Volumes/m
				
目录一、nginx作为缓存服务的配置语法二、lz虚拟机说明三、nginx缓存服务器的演示示例1、配置192.168.3.11虚拟机（即模拟三台虚拟机应用服务器）2、配置192.168.3.10虚拟机（即负载均衡缓存服务器）
一、nginx作为缓存服务的配置语法
参考lz此博文链接：https://wwwxz.blog.csdn.net/article/details/119520154
二、lz虚拟机说明
　　root /home/html/;#主目录
　　expires 1d;#网页的过期时间
　　error_page 404 =200 /fetch$request_uri;#404定向到/fetch目录下
　　location /fetch/ {#404定向到这里
　　internal;#指明这个目录不能在外部直接访问到
　　expires 1d;#网页的过期时间
        server_name  test.exmaple.cn;
        location / {
                if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                   add_header Cache-Control "private, no-sto
				
方式1:直接在loacation模块下加入如下参数:# 配置页面不缓存html和htm结尾的文件
        if ($request_filename ~* .*\.(?:htm|html)$) 
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
        }方式2:location下配置 表示最长过期时间，即一直缓存。 
很长时间以来，项目一直设置为缓存所有的文件，因此遇到一个代码版本更新浏览器刷新失效的问题。通常，我们打包时（采用webpack方案）输出时会采用contentHash来保证更新代码后相关的js、css文件发生变更。但我们可能忽略了一个问题：js、css文件名发生改变浏览器就一定会加载吗？答案当然是否定的，让我们研究下如何解决。
为了更好地理解一下文章，你需要了解以下知识;如已了解可跳过。
webpack output浏览器缓存机制设置html的meta缓存nginx基础
使用con
				
location ~*index.html {                           
            add_header Access-Control-Allow-Origin *;                   
     add_header Access-Control-Allow-Headers X-Requested-With;
     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
				
　　HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息，包括浏览器端，中间缓存服务器端(如：squid等)，Web服务器端。本文讨论头信息 中带缓存控制信息的HTML页面(JSP/Servlet生成好出来的也是HTML页面)在中间缓存服务器中的缓存情况。
 HTTP协议中关于缓存的信息头关键字包括Cache-Control(HTTP1.1)，Pragma(HTTP1...
浏览器缓存是为了提高加载速度，因此我们可以通过Nginx对静态文件进行缓存。
location ~ ^/(images|javascript|js|css|flash|media|static)/ {
 #过期30天
 expires 30d;
定义错误提示页面
error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  root html;
自动显示目录
location / {
 autoindex on;
此外，还可以添加两个参数
autoindex_exact_size off; 默认
				
最近准备用nginx搭建了一个图片服务器，看中的就是nginx超强的静态文件处理能力。
由于图片量比较大，和web服务器（也是nginx）分开运行，虽然web服务器调用图片没用问题，但毕竟是远程调用，肯定没有本地文件系统那么快，因此仍然有优化的空间。
proxy_store
使用前的nginx配置
location ~* ^.+\.(js|ico|gif|jpg|jpeg|png|html|htm)$ {
  log_not_found off;
  access_log off;
  expires 7d;
接下来就用到了nginx的proxy_store模块，让nginx 将取得的
				
使用场景:
项目的页面需要加载很多数据，也不是经常变化的，不涉及个性化定制，为每次请求去动态生成数据，性能比不上根据请求路由和参数缓存一下结果，使用 Nginx 缓存将大幅度提升请求速度。
只需要配置 proxy_cache_path 和 proxy_cache 就可以开启内容缓存，前者用来设置缓存的路径和配置，后者用来启用缓存。
http {
 proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m use_temp_path=off;
				
最近一次移动端Vue应用的上线，导致某些用户使用某些功能时出现问题，经主动清空缓存后恢复。有时候清空微信应用的存储空间缓存仍不能解决问题，此时安卓机可借助微信TBS调试工具 http://debugx5.qq.com （微信中打开页面，勾选最下面四个选项清除缓存），但该工具目前只支持安卓手机，苹果机就比较麻烦了。为了找到问题的本质，从根本上避免问题，最近浏览了一些文章，其中有一篇对浏览器缓存的分析及在Nginx中对应的处理策略总结的比较好，这里分享给大家。
原文标题：http常用缓存策略及vue-cli单
在本地开发的时候，经常会碰到缓存引起的莫名其妙的问题，最暴力的方式就是清掉浏览器的缓存，或者使用Ctrl + F5，Shift + F5强制刷新页面。 有时候按了好几下，缓存还是清不掉，只能暂时禁用浏览器静态资源缓存了，配置如下：
location ~.*\.(js|css|html|png|jpg)$
   add_header Ca