• 前端页面部署之后更新缓存


    前端页面部署更新之后,因为缓存问题,用户正在浏览的页面或者收藏夹中直接访问,页面在不刷新更新缓存的情况下,用户不知道页面是否有更新

    解决方案:

    服务端支持:
    1.服务端给予一个版本号的返回接口,定时器轮询 时间长一些,询问是否更新
    2.socket,推送消息
    3.服务端做个中间件拦截用户一些请求,判断它携带的版本
    不需要支持:
    1.在编译的时候自己生成一个js文件,作为版本监控,然后前端用jsonp去请求这个js,判断是否有更新。

    这里主要是前端不需要服务端支持的情况下

      1.思路:在打包的时候,生成版本号,使用jsonp的方式请求获取版本号,

      2.第二次有更新时,打包生成版本号与上一个版本进行对比,若不一样就提醒用户有更新,执行reload刷新页面,进而更新缓存

    const fs = require('fs')
    const path = require('path')
    // 打包的时候生成版本号
    if (isProduction) {
      var version1 = new Date().getTime()
      var content = "getVersion('" + version1 + "')"
        //打包之后的地址
      fs.writeFile(path.join(__dirname, `/public/common`) + "/version.js", content, function (err) {
        if (err) {
          return console.log(err);
        }
        console.log("The file was saved!");
      });
    }
    直接在main.js中引入js代码
    import Vue from 'vue'
    
    if (process.env.NODE_ENV === 'production') {
      setInterval(() => {
        // 重复创建script标签,先删除
        const preScript = document.getElementsByTagName("script")[0];
        const preSrc = preScript.src;
        const parentNode = preScript.parentNode
        if (preSrc.includes('version')) {
          parentNode.removeChild(preScript)
        }
        const versionScript = document.createElement("script");
        // todo 注意路径问题
        versionScript.src = '/openweb/common/version.js?v=' + new Date().getTime();
        const s = document.getElementsByTagName("script")[0];
        parentNode.insertBefore(versionScript, s); // 插入到head标签中 layout.js前
    
        window.getVersion = version => {
          if ((localStorage.frontendVersion && version !== localStorage.frontendVersion) || (window.frontendVersion && version !== window.frontendVersion)) {
            console.log('localStorage.frontendVersion', localStorage.frontendVersion);
            console.log('version', version);
            Vue.prototype.$confirm({
              title: '页面有更新,确定要更新吗?',
              onOk() {
                location.reload()
              },
              onCancel() {},
            });
          }
          localStorage.frontendVersion = version; // 保存 以便下次使用判断
          window.frontendVersion = version; // 保存 以便下次使用判断
        }
    
      }, 10000);
    }
  • 相关阅读:
    李清华 201772020113《面向对象程序设计(java)》第十四周学习总结
    李清华201772020113《面向对象程序设计(java)》第十三周学习总结
    201772020113李清华《面向对象程序设计(java)》第十二周学习总结
    李清华201772020113《面向对象程序设计(java)》第十一周学习总结
    2020软件工程作业00——问题清单
    2020软件工程个人作业06
    2020软件工程作业04
    2020软件工程作业03
    2020软件工程作业01
    2020软件工程个人作业06——软件工程实践总结作业
  • 原文地址:https://www.cnblogs.com/jcxfighting/p/12872490.html
Copyright © 2020-2023  润新知