客户端浏览器缓存未更新

Blade 未结 2 3630
杜波
杜波 剑圣 2021-01-26 10:44

更新前端页面后,客户端浏览器未更新,必须ctrl+F5才能显示最新的,该情况能否不需要客户手动操作啊?


对于生产环境确实不适用,如果通过加版本号操作是否会方便呢?

目前静态资源还做了cdn的,但是客户端不刷新不是cdn造成的。



麻烦提供下解决思路,是代码变动?还是nginx变动还是哪里变动

2条回答
  • 2021-01-26 10:56

    可以通过nginx配置 no-cache 关闭缓存,以及webpack配置 版本号时间戳 来减少缓存,具体可以参考:https://blog.csdn.net/qq_28827635/article/details/109602150


    nginx的location内增加如下配置:


        if ($request_filename ~* .*\.(?:htm|html)$)

         {

             add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";

         }

         if ($request_filename ~* .*\.(?:js|css)$)

         {

             expires      7d;

         }

         if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)

         {

             expires      7d;

         }


    webpack优化配置参考如下,一般情况css不配置也没事,主要是js的配置:

    image.png

    2 讨论(1)
  • 2021-01-26 10:57

    这里分享一下我们公司目前研究的解决方案。

    1. 在前端(我们是sword)。配置文件里设置hash:true

        这样就会打上JS版本号,CSS版本号。

    2. 并且在global.js把那个右上角提示手动刷新的提示(估计是antd pro自带的)改成强制自动刷新。(因为用户很可能会忽略无视掉这个弹框提示,导致页面一直不刷新)

    3. 并在nginx和document.ejs设置不缓存index.html,和serviceWorker.js(这个是一种叫pwa的技术,导致了页面一直有离线缓存)。

        不缓存index.html是因为umi打版本号只是打给了js和css,而页面进入读取的还是同一份index.html,他没有版本号,而css和js是通过index.html里面读取其版本号出来,然后进行加载的。


    仅供参考

    2 讨论(0)
提交回复