关于webpack:单页面-发版后如何通知用户端更新

117次阅读

共计 1044 个字符，预计需要花费 3 分钟才能阅读完成。

【单页面】发版后如何【告诉用户端更新】
景象形容：

 首先技术栈, 是 vue 全家桶技术栈。典型 spa 单页利用，每次有新性能的上线，都须要被动告诉，使用者自主刷新页面【强刷】，能力呈现新性能。

产生起因：
每次打包发版【代码有变动】，index.html, 网站即入口文件是变动的。
然而在单页面利用，页面跳转，都在同一个浏览器线程中，不会再一次申请 index.html 资源，即便你对 index.html 资源不缓存策略，即设置响应头部信息为 cache-control：no-store 也是不好使。用户还得必须刷新。

那么解决策略如何，一图胜千言：

介绍 webpack【4 版本】中插件如何实现

// 获取并注入版本号 未写点【这里还能够写 把版本号 和 我的项目 名 发送到服务器，作版本记录】const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = class WebpackVersionPlugin {constructor(options = {}) {
    this.options = Object.assign({versionName: '$AppVersion'}, options)
  }
  apply(complier) {const { versionName} = this.options;
    complier.hooks.emit.tapAsync('WebpackVersionPlugin', (compilation, callback) => {const { hash} = compilation
// 须要在 index.html 注入变量【在 htmlWebpackPlugin 钩子里解决 具体看官网文档】HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'MyPlugin', 
        (data, cb) => {const htmlScriptStr = `<script>window.${versionName}="${hash}"</script>`
          // 插入到第一个 script 标签后面
          data.html = data.html.replace(/(<script)/,  `${htmlScriptStr}$1`)
          cb(null, data)
        }
      )
      callback()})
  }
}

成果如下：

2 为什么用 location.reoload, 通过轮训 hash 版本比拟，能够告诉用户是否刷新页面【ui 层面】，是则调用 reload, 否则不操作

正文完