前端静态文件缓存到nginx服务器上

前文：作为一个前端开发，有义务多学习一些项目前后的扩展内容，nginx也算一个比较接近前端的模块，所以多了解了一下（主要是被迫要做一个需求）

 

前端的静态文件，图片，字体，css,js等等这些，可能打包完以后都不会改，就算改也不会经常的，所以跟的包一起部署的话，会影响用户的体验，已经打开页面的速度，所以把不经常修改的内容放到nginx，然后再缓存起来。

当用户访问页面时，第一次去请求nginx，配置了缓存以后，第二次则会请求浏览器缓存，这样用户以后再打开页面的时候，就不会再重新请求。

具体实现也是查阅了好多资料，nginx缓存还是比较全面的，考虑了很多种情况，也走了好多坑，大概述说一下整个流程。

原理就是前端去请求文件，然后再解析，具体使用具体再封装。

前端解析代码：

readFile(filePath) {
    let xhr = null;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    const okStatus = document.location.protocol === "file" ? 0 : 200;
    xhr.open("GET", filePath, false);
    xhr.overrideMimeType("text/html;charset=utf-8");
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
  },

调用方法

传的参数就是文件的URL，因为是放在nginx上，前缀是项目的链接，这里用env来区分线上和测试，调用以后返回的是一个json字符串，需要JSON.parse去转义才能使用

readFile(process.env.VUE_APP_ROUTER + '/public/airport.json')

导入导出

导入的方式也会改变，比如之前组件里面用到了静态文件，导入可能是

import airport from "../../../../../public/airport";

现在的导出和导入

//导出，
export const airport = JSON.parse(fn.readFile(process.env.VUE_APP_ROUTER + '/public/airport.json'))

//导入
import { airport } from "@/utils/public.js";

接下来就是nginx了

先了解一下浏览器缓存

1. 缓存可以减少冗余的数据传输。节省了网络带宽，从而更快的加载页面。
2. 缓存降低了服务器的要求，从而服务器更快的响应。

那么我们使用缓存，缓存的资源文件到什么地方去了呢？

那么首先来看下 memory cache 和 disk cache 缓存

memory cache: 它是将资源文件缓存到内存中。等下次请求访问的时候不需要重新下载资源，而是直接从内存中读取数据。

disk cache: 它是将资源文件缓存到硬盘中。等下次请求的时候它是直接从硬盘中读取。

那么他们两则的区别是？

memory cache(内存缓存)退出进程时数据会被清除，而disk cache(硬盘缓存)退出进程时数据不会被清除。内存读取比硬盘中读取的速度更快。但是我们也不能把所有数据放在内存中缓存的，因为内存也是有限的。

memory cache(内存缓存)一般会将脚本、字体、图片会存储到内存缓存中。
disk cache(硬盘缓存) 一般非脚本会存放在硬盘中，比如css这些。

缓存读取的原理：先从内存中查找对应的缓存，如果内存中能找到就读取对应的缓存，否则的话就从硬盘中查找对应的缓存，如果有就读取，否则的话，就重新网络请求。

那么浏览器缓存它又分为2种：强制缓存和协商缓存。

那么协商缓存的标识又有2种：ETag/if-None-Match 和 Last-Modified/if-Modify-Since

强缓存：浏览器不与服务端协商直接取浏览器缓存

协商缓存：浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源

协商缓存Last-Modified/if-Modify-Since

浏览器第一次发出请求一个资源的时候，服务器会返回一个last-Modify到hearer中. Last-Modify 含义是最后的修改时间。
当浏览器再次请求的时候，request的请求头会加上 if-Modify-Since，该值为缓存之前返回的 Last-Modify. 服务器收到if-Modify-Since后，根据资源的最后修改时间(last-Modify)和该值(if-Modify-Since)进行比较，如果相等的话，则命中缓存，返回304，否则, 如果 Last-Modify > if-Modify-Since, 则会给出200响应，并且更新Last-Modify为新的值。

ETag的原理和上面的last-modified是类似的。ETag则是对当前请求的资源做一个唯一的标识。该标识可以是一个字符串，文件的size,hash等。只要能够合理标识资源的唯一性并能验证是否修改过就可以了。ETag在服务器响应请求的时候，返回当前资源的唯一标识(它是由服务器生成的)。但是只要资源有变化，ETag会重新生成的。浏览器再下一次加载的时候会向服务器发送请求，会将上一次返回的ETag值放到request header 里的 if-None-Match里面去，服务器端只要比较客户端传来的if-None-Match值是否和自己服务器上的ETag是否一致，如果一致说明资源未修改过，因此返回304，如果不一致，说明修改过，因此返回200。并且把新的Etag赋值给if-None-Match来更新该值。

last-modified 和 ETag之间对比

1. 在精度上，ETag要优先于 last-modified。
2. 在性能上，Etag要逊于Last-Modified，Last-Modified需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
3. 在优先级上，服务器校验优先考虑Etag

理解强制缓存

基本原理：浏览器在加载资源的时候，会先根据本地缓存资源的header中的信息(Expires 和 Cache-Control)来判断是否需要强制缓存。如果命中的话，则会直接使用缓存中的资源。否则的话，会继续向服务器发送请求。

Expires

Expires 是http1.0的规范，它的值是一个绝对时间的GMT格式的时间字符串。这个时间代表的该资源的失效时间，如果在该时间之前请求的话，则都是从缓存里面读取的。但是使用该规范时，可能会有一个缺点就是当服务器的时间和客户端的时间不一样的情况下，会导致缓存失效。

Cache-Control

Cache-Control 是http1.1的规范，它是利用该字段max-age值进行判断的。该值是一个相对时间，比如 Cache-Control: max-age=3600, 代表该资源的有效期是3600秒。除了该字段外，我们还有如下字段可以设置：

no-cache: 需要进行协商缓存，发送请求到服务器确认是否使用缓存。

no-store：禁止使用缓存，每一次都要重新请求数据。

public：可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。

private：只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存。

Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高。

 

因为业务的需求是修改了文件要重新加载，所以我们用协商缓存

nginx配置

需要先把静态文件放到nginx上，然后再写location

location /public {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-        
            Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content- 
            Type,Authorization';
          # add_header Cache-Control no-store;
            add_header Cache-Control no-cache;
            alias /tmp/public/;
          # expires 30d;
          # autoindex on;
   }

因为在开发环境也使用了， 所以涉及到跨域，要加解决跨域   关键的add_header Cache-Control no-cache;

no-cache与no-store的区别

　　no-cache表示不缓存过期资源，缓存会向服务器进行有效处理确认之后处理资源

　　而no-store才是真正的不进行缓存。

 

好像是实现了，但不知道为啥，缓存以后状态返回的是200  不是304  有哪里不对还请大佬们指点。