如何利用node实现静态文件缓存详解

目录

• 缓存

• 缓存位置分类
• 缓存设置header

• 强缓存

• 思路
• 代码实现
• 效果展示

• 思路
• 代码实现
• 效果展示

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");
});

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");
});