어떻게 node 를 이용 하여 정적 파일 캐 시 를 실현 합 니까?

캐 시
브 라 우 저 캐 시(Brower Caching)는 브 라 우 저가 이전에 요청 한 파일 을 캐 시 하여 다음 방문 시 중복 사용 할 수 있 도록 하고 대역 폭 을 절약 하 며 접근 속 도 를 높 여 서버 압력 을 낮 추 는 것 이다.
캐 시 위치 분류
memory cache:메모리 의 캐 시,브 라 우 저 를 닫 으 면 비 워 집 니 다.보통 js 라 이브 러 리 를 저장 합 니 다.

disk cache:하 드 디스크 의 캐 시,브 라 우 저 를 닫 으 면 바로 비 워 지지 않 습 니 다.보통 큰 파일 을 저장 합 니 다.예 를 들 어 그림 자원,iconFont 같은 아이콘 파일 라 이브 러 리 입 니 다.

둘 의 차이:
  1.읽 기 속도:memory cache 캐 시 는 현재 해 석 된 파일 이 브 라 우 저 tab 프로 세 스에 있 습 니 다.다음 에 실행 할 때 빠르게 읽 을 수 있 습 니 다.
              disk cache 는 캐 시 를 하 드 디스크 파일 에 직접 기록 합 니 다.캐 시 를 읽 으 려 면 이 캐 시 에 저 장 된 하 드 디스크 파일 에 대해 I/O(읽 기)작업 을 한 다음 캐 시 내용 을 다시 처리 해 야 합 니 다.메모리 캐 시 보다 속도 가 느 립 니 다.
  2.실효 성:memory cache 는 tab 프로 세 스 에 존재 하고 tab 가 닫 히 면 비 웁 니 다.
            disk cache:비 워 질 시 기 는 아직 모 르 겠 어 요.
  3.우선 순위:memory cache 가 disk cache 보다 크다
  큰 파일 의 경우 대개 메모리 에 저장 되 지 않 습 니 다.반대로 코드 각도 도 현재 브 라 우 저 캐 시 위 치 를 제어 할 수 없 을 것 같 습 니 다.
캐 시 설정 헤더
cache-control
 1.   cache-control:max-age=10/10 초 안에 다시 보 내 는 요청 은 강 한 캐 시 에 직접 명중 합 니 다.서버 에 요청 하지 않 아 도 브 라 우 저 캐 시 를 읽 으 면 됩 니 다.
 2.   Cache-Control:no-cache//강제 캐 시 를 금지 합 니 다.매번 서버 에 요청 하 는 동시에 브 라 우 저 캐 시 에 도 존재 합 니 다.(협상 캐 시 기본)
 3.   Cache-Control:no-store//매번 서버 를 요청 하고 브 라 우 저 에 존재 하지 않 습 니 다.캐 시 없 는 것 과 같 습 니 다. 
Expires：
낮은 버 전의 브 라 우 저 를 호 환 합 니 다.이것 은 절대 시간 을 설정 하 는 것 입 니 다.서버 의 현재 시간 과 브 라 우 저의 현재 시간 을 비교 하 는 것 입 니 다.(일반적으로 편차 가 있 고 http 1.0 의 결과 물 입 니 다)cache-control 과 동시에 존재 할 때 cache-control 우선 순위 가 높 습 니 다.

last-modified:캐 시 협상 시 If-Modified-Since 와 쌍 을 지어 나타 납 니 다.If-Modified-Since 요청 헤드 의 값 은 이전 서버 의 응답 헤드 last-modified 값 에 대응 합 니 다.요청 자원 에 대한 수정 시간 을 제공 하 는 것 과 같 으 면 협상 캐 시 를 304 로 되 돌려 주 고 브 라 우 저 는 캐 시 를 읽 으 면 됩 니 다

Etag:자원 표지(말 할 때 지문 도 있 고 보통 md5 값)는 캐 시 를 협상 할 때 사용 하고 파일 의 수정 여 부 를 비교 합 니 다.If-None-Match 와 짝 을 지어 출현

Etag 는 주로 Last-Modified 가 해결 할 수 없 는 몇 가지 문 제 를 해결 하기 위해 서 입 니 다.
1.일부 파일 은 주기 적 으로 변 경 될 수 있 지만 그의 내용 은 변 하지 않 습 니 다.(변 경 된 수정 시간 만)이때 우 리 는 클 라 이언 트 가 이 파일 이 수정 되 었 다 고 생각 하고 다시 GET 하 는 것 을 원 하지 않 습 니 다.
2.일부 파일 의 수정 이 매우 빈번 합 니 다.예 를 들 어 초 이하 의 시간 내 에 수정 합 니 다.(예 를 들 어 1s 내 에 N 번 수정)If-Modified-Since 는 이렇게 정교 한 것 을 검사 할 수 없습니다.
3.일부 서버 는 파일 의 마지막 수정 시간 을 정확하게 얻 지 못 합 니 다.
4.Etag 와 Last-modify 는 Etag 우선 순위 비교 가 동시에 존재 합 니 다.
실제 항목:html 는 캐 시 를 허용 하지 않 습 니 다.html 에서 인 용 된 js 는 유일한 버 전 번 호 를 근거 로 합 니 다.다시 방문 할 때 최신 html 에 접근 하고 인 용 된 js 또는 다른 파일 버 전 번 호 를 수정 하지 않 으 면 로 컬 캐 시 를 사용 합 니 다.
node 정적 파일 캐 시 구현
파일 구조

public 테스트 에 사용 할 정적 자원
강 캐 시
사고의 방향

서비스 만 들 기

처음으로 요청 경 로 를 분석 하고 fs.createReadStream().ipe()에서 파일 읽 기

를 요청 합 니 다.

응답 헤드 Cache-Contro:max-age=10 강 캐 시 상대 시간 설정

코드 구현

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");
//                      
const mime = require("mime");//npm i mime 

const server = http.createServer((req, res) => {
  let { pathname, query } = url.parse(req.url, true);
  //__dirname                          
  let filePath = path.join(__dirname, "public", pathname);
  console.log(req.url);//10s       ，        ，      10s    
  //          ,        ，              
  res.setHeader("Cache-Control", "max-age=10"); //       ；       +max-age       ，    Expires 
  res.setHeader("Expires", new Date(Date.now() + 10).toUTCString()); //        ,          ，            
  //                   
  fs.stat(filePath, function (err, statObj) {
    // url    ，            url     404
    if (err) {
      res.statusCode = 404;
      res.end("NOT FOUND");
    } else {
      //      ,    +   pipe         ,  mime         ，        utf-8
      if (statObj.isFile()) {
        fs.createReadStream(filePath).pipe(res);
        res.setHeader(
          "Content-Type",
          mime.getType(filePath) + ";charset=utf-8"
        );
      } else {
        //                  index.html
        let htmlPath = path.join(filePath, "index.html");
        // fs.access            
        fs.access(htmlPath, function (err) {
          if (err) {
            //            404
            res.statusCode = 404;
            res.end("NOT FOUND");
          } else {
            //   ，        pipe         
            fs.createReadStream(htmlPath).pipe(res);
            res.setHeader("Content-Type", "text/html;charset=utf-8");
          }
        });
      }
    }
  });
  //         nodemon cache.js          http://localhost:3000/ 
});
server.listen(3000, () => {
  console.log("server start 3000");
});

효과 전시

협상 캐 시
성공 하 다.
사고의 방향

서비스 만 들 기

처음으로 요청 경 로 를 분석 하고 fs.createReadStream().ipe()에서 파일 읽 기

를 요청 합 니 다.

응답 헤드 설정 Last-modified 되 돌아 오 는 브 라 우 저

다시 요청 합 니 다.브 라 우 저 if-last-modified 와 현재 자원 수정 시간 을 비교 하고 같은 경우 협상 캐 시 를 명중 시 키 고 응답 코드 304 를 되 돌려 줍 니 다.반대로 경로 에 대응 하 는 최신 자원 과 응답 코드 200

을 되 돌려 줍 니 다.
코드 구현

const http = require("http");
const url = require("url");
const fs = require("fs");
const path = require("path");
const mime = require("mime");


  let filePath = path.join(__dirname, "public", pathname);
  console.log(req.url);
  fs.stat(filePath, function (err, statObj) {
    if (err) {
      res.statusCode = 404;
      res.end("NOT FOUND");
    } else {
      if (statObj.isFile()) {
        //                change      statObj.ctime
        const ctime = statObj.ctime.toUTCString();
        //       if-modified-since ===          ，      ，    304           
        if (req.headers["if-modified-since"] === ctime) {
          res.statusCode = 304; //        
          res.end(); //
        } else {
          //  if-modified-since !==         ,   Last-modified                           last-modify-since    
          res.setHeader("Last-modified", ctime);
          fs.createReadStream(filePath).pipe(res);
          res.setHeader(
            "Content-Type",
            mime.getType(filePath) + ";charset=utf-8"
          );
        }
      } else {
        fs.access(htmlPath, function (err) {
          if (err) {
            //            404
            res.statusCode = 404;
            res.end("NOT FOUND");
          } else {
            fs.createReadStream(htmlPath).pipe(res);
            res.setHeader("Content-Type", "text/html;charset=utf-8");
          }
        });
      }
    }
  });
  //         nodemon cache2.js               http://localhost:3000/ 
});
server.listen(3000, () => {
  console.log("server start 3000");
});

효과 전시
페이지 를 새로 고 칠 때마다 실 행 됩 니 다.  console.log(req.url); 서버 를 요청 하 였 으 나 서버 는 304 명중 협상 캐 시 브 라 우 저 로 돌아 가 캐 시 자원 을 직접 읽 으 면 됩 니 다.

성공 하 다.
총결산
node 를 이용 하여 정적 파일 캐 시 를 실현 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 node 정적 파일 캐 시 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!