Nginx(SPA应用) 如何正确配置HTTP缓存

在项目中正确配置 HTTP 缓存不仅可以提高网站加载速度, 同时还减轻了服务端压力, 但是如果错误配置缓存, 就可能导致用户加载过期页面, 这也是我们不想看到的, 下面介绍一下在 SPA 项目中如何正确配置 HTTP 缓存

在 SPA 项目中, 我们通常只需要遵循下面几个原则即可

• 有哈希后缀的文件可以设置比较长的缓存时间(如1年), 因为哈希后缀是根据文件内容生成的(即: 如果文件内容发生改变, 在 building 的时候哈希值也会随之改变), 所以可以尽管设置一个比较长的缓存时间, 不需要担心用户加载过期资源
• 对于没有哈希后缀的文件(如index.html)禁止强缓存
• 如果 nginx 同时充当了代理接口的功能, 则推荐对接口禁止一切缓存(强缓存+协商缓存), 避免加载过期数据

示例: 在 Nginx 中, 可以通过自定义变量的方式, 根据文件类型指定不同的缓存策略

http {
    # 定义变量
    map $sent_http_content_type $cache_control_map {
        "text/html"    "no-cache, max-age=0"; # html 文件禁止强缓存
        "application/json"    "no-store, max-age=0"; # 接口禁用一切缓存(接口走nginx代理时有效)
        default        "max-age=315360000"; # 其他文件设置缓存为1年
    }

    server {
      # 设置 Cache-Control 规则
      add_header "Cache-Control" $cache_control_map;
      # ...
    }
}