Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

【中间件】静态文件服务

  • 安装

    npm i -S koa-static-server
    
    • 最新版本 1.5.2
    • 虽然大多数人用的都是更老的koa-static,但我们这里考虑到路径问题,还是用这个
  • 根目录下要新建static文件夹,放置静态文件

    mkdir static
    
    • 进到里面,新建子文件夹
      mkdir img && mkdir js
      
      • 放一个几百k的js文件进去,命名为test.js
  • 使用写法

    import serve from "koa-static-server";
    
    app.use(serve({
        rootDir:'static', 
        rootPath:'/static', 
        maxage: 10 * 1000
    }));
    
    • 可添加maxage选项作为强缓存
      • 会指定响应中的Cache-Control: max-age=60
      • 表示60秒内不用再次从服务器获取
      • 如果浏览器单独请求js文件,刷新时,这个强缓存是无效的
        • 猜测可能浏览器判断出单独请求时的刷新意图,就是拿最新的,所以默默给请求头加上了max-age=0,导致强缓存失效
    • koa-static-server 会默认加入协商缓存
      • 给我们的返回头加上Last-Modified
      • 发出的请求也会自动携带If-Modified-Since
      • 【但是】强缓存过期后,此协商缓存并未生效(没有返回304)
        • 原因:需要下面进一步配置协商缓存,使其生效
  • 访问localhost:8060/static/js/test.js

    • 可单独请求js文件,也可以到后面ejs服务端渲染时,再加到script标签内引用