HTTP--http之緩存頭Cache-Contro(五)

時間 2020-07-04

原文原文鏈接

文件目錄

文件內容

server3.js

const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
    console.log('request come', req.url);
    const html = fs.readFileSync('index.html', 'utf8');
    if (req.url === '/') {
        res.writeHead(200, {
            "Content-Type":"text/html"
        })
        res.end(html)   
    }
    if (req.url === '/script.js') {
        res.writeHead(200, {
            "Content-Type": "text/javascript",
            "Cache-Control":"max-age=20"
        })
        res.end('console.log("script loaded")')   
    }
}).listen(8888)
console.log('server start at port 8888')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    8888
    <script src="/script.js"></script>
</body>
</html>

運行

第一次請求

第二次請求

webpack打包的時候，js後面會增哈希字符串

在緩存時間段內，若是服務端的內容發生了變化，再次發起請求，仍是會從本地緩存中讀取，並不會從服務端從新請求
因此webpack打包的時候，會根據內容生成哈希字符串

server3.js
修改緩存最大時間，和打印內容

const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
    console.log('request come', req.url);
    const html = fs.readFileSync('index.html', 'utf8');
    if (req.url === '/') {
        res.writeHead(200, {
            "Content-Type":"text/html"
        })
        res.end(html)   
    }
    if (req.url === '/script.js') {
        res.writeHead(200, {
            "Content-Type": "text/javascript",
            "Cache-Control":"max-age=200"
        })
        res.end('console.log("script loaded 222")')   
    }
}).listen(8888)
console.log('server start at port 8888')

在200秒內請求，仍是會返回原來的內容javascript

超出200秒，會返回新的內容html