http常用缓存策略及vue-cli单页面应用、服务器端(nginx)如何设置缓存或者禁用

本文介绍了HTTP的缓存策略,包括不使用缓存、协商缓存和强制缓存,详细讲解了LAST-MODIFIED、ETAG、Expires和Cache-Control的工作原理。针对Vue项目,提出了通过vue.config.js和nginx配置来解决浏览器缓存问题的方案,旨在确保程序升级后用户能获取最新资源,同时充分利用缓存以优化用户体验。
摘要由CSDN通过智能技术生成

问题描述

vue 项目打包上线之后,每一次都会有浏览器缓存问题,需要手动的清除缓存。这样用户体验非常不好,所以我们在打包部署的时候需要尽量避免浏览器的缓存。

需要解决的问题

1、程序每次升级后,用户都不会因为缓存问题而执行的仍然是老的程序。
2、若程序没升级,用户对静态资源的请求则能用到缓存。

关于http或者是浏览器缓存策略,可以分为这三种:

  • 不使用缓存

  • 强制使用缓存

  • 协商使用缓存

不使用缓存

有时,我们希望浏览器永远都不要使用缓存,全部到服务器拉取数据,此时即为不使用缓存,我们可以在服务端通过Cache-Control为 no-store实现。

在这里插入图片描述

服务器端针对上面文件设置了no-store,可以看到在请求的时候,无论怎么刷新,都是返回200,不会显示304,也不会显示“memory cache”或“disk cache”,说明真的都是从服务器重新拉取数据。

比如我们想设置html文件不缓存,可以在域名的解析配置中如下设置,当文件后缀为html或htm时add_header Cache-Control “no-store”

server {
   
listen 80;
server_name yourdomain.com;
location / {
   
    try_files $uri $uri/ /index.html;
    root /yourdir/;
    index index.html index.htm;

    if ($request_filename ~* .*\.(?:htm|html)$)
    {
   
        add_header Cache-Control "no-store";  //对html文件设置永远不缓存
    }  
  }
}

这种方式缺点就是每次都要去服务端拉取文件,即使文件没有更新,很明显这样增加了不必要的带宽消耗。

如果文件没有更新,我们就使用缓存,只有更新了才去拉取最新文件,这样多好,这就是协商缓存。

协商缓存

协商缓存就是浏览器携带文件缓存标识(如Last-Modified或ETag),向服务器发送请求,由服务器根据文件缓存标识来决定是否使用缓存,如果文件没有更新,则告诉浏览器使用本地缓存,如果文件更新了,则直接返回新文件内容。

可以看出,相比不使用缓存,协商缓存是会大大减少带宽消耗的。

  • 协商缓存生效,返回304 和 Not Modified

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-cli是一个基于Vue.js的脚手架工具,可以帮助我们快速搭建Vue项目。在使用Vue-cli创建的项目中,我们可以使用热更新功能,即在修改代码后,浏览器会自动刷新,以便我们能够及时查看修改的效果。 然而,有时候我们会发现在使用热更新功能时,更新速度较慢。有以下几个可能的原因: 1. 项目过大:如果项目文件较多或者代码复杂度较高,热更新的速度可能会受到影响。在这种情况下,可以优化代码结构,减少不必要的文件或代码,以提高热更新的速度。 2. 网络问题:热更新功能需要通过网络传输文件,如果网络不稳定或速度较慢,也会导致热更新慢。可以考虑切换到更稳定的网络环境,或者使用代理进行加速。 3. 资源缓存:浏览器会将经常访问的文件进行缓存,下次访问时可以直接从缓存中获取,而不是重新下载。这也包括热更新相关的文件。如果热更新慢,可能是因为浏览器仍然使用了缓存的旧文件。可以尝试清除浏览器缓存,或者使用无缓存模式进行调试。 4. 其他原因:除了上述可能的原因外,还有一些其他因素可能影响热更新的速度,比如电脑性能、浏览器类型等。可以尝试在不同的环境或机器上运行,看是否有改善。 总结来说,Vue-cli项目热更新慢可能是因为项目过大、网络问题、资源缓存等原因导致的。我们可以通过优化代码结构、切换网络环境、清除缓存等方式来提高热更新的速度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值