关于vue.js:网页重新部署通知用户最佳实践

为什么须要

如果用户打网页后，长时间不敞开对应标签页，也不刷新页面（在中后盾治理我的项目挺常见的），且期间服务器页面有更新，可能会存在以下问题：

1. 单页利用，如果前端部署是全量更新的话（倡议增量更新），用户跳转其余页面，可能会 404, 因为对应资源曾经不存在了。
2. 如果后端接口有更新，且没做兼容解决的话，会影响数据准确性，也可能间接报错。
3. 一个紧急 bug，你修复并公布了，用户如果没刷新页面，还是能够复现。
4. 用户长期应用历史版本，影响用户体验。
5. 老板和销售：不是说好的明天更新吗，怎么页面还是老样子。
   你：刷新下页面就好了
   老板和销售：怎么刷新页面啊？
   你：😤

plugin-web-update-notification

监听网页更新，并告诉用户刷新页面的插件，反对 Vite、Webpack、umi

没错，最佳实际就是这个插件。

github | npm | 文档

原理

以 git commit hash (也反对 package.json version、build timestamp、custom) 为版本号，打包时将版本号写入一个 json 文件，同时注入客户端运行的代码。客户端轮询服务器上的版本号（浏览器窗口的visibilitychange、focus 事件辅助），和本地作比拟，如果不雷同则告诉用户刷新页面。

长处

1. 接入简略，装置插件，批改配置文件即可，不必批改业务代码（如果不自定义行为）。

   // 以 vite 为例
   import {defineConfig} from 'vite'
   import vue from '@vitejs/plugin-vue'
   import {webUpdateNotice} from '@plugin-web-update-notification/vite'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue(),
       webUpdateNotice({logVersion: true,}),
     ]
   })

2. 反对多种版本号类型：

   • git commit hash（默认）。
   • package.json 中的 version 字段。（倡议搭配 bumpp 食用最佳）
   • build timestamp，运行打包命令时的工夫戳。
   • custom，用户自定义版本号。

3. 预置了一个简洁的更新 Notification，能够自定义文案、款式、地位。当然也能够勾销默认的 Notification，监听到更新事件后自定义行为。

4. 预置的 Notification 文案反对国际化。
5. tiny, 注入的 js 和 css 文件压缩后不到 2kb。
6. 欠缺的 ts 类型提醒。
7. issue 响应急时 …

什么时候会检测更新

检测：通过 fetch 加载服务器上的 version.json 文件（会疏忽本地缓存）。

1. 首次加载页面。
2. 轮询（default: 10 60 1000 ms）。
3. js 脚本资源加载失败 (404 ?)。
4. 标签页 visibilitychange、focus 事件为 true 时。(按目前公司的我的项目来看，大多数更新是这个时候命中的，轮询反而少些)

对于时效性

有人说轮询如果频率太慢了，时效性会比拟差。

我感觉影响不大。用户个别不会长时间放弃这个标签页在前台，很有可能会切换到其余标签页或间接切出浏览器做其余操作，这时如果你回到以后标签页，会触发 visibilitychange 事件，立即检测更新。所以大多数更新应该是在visibilitychange、focus 事件中命中的，轮询反而是一个辅助兜底的伎俩。

轮询对服务器的压力？

感觉应该问题不大，只是轮询服务器上的一个 json 文件。

// version.json
{"version": "f29e8de"}

而且如果用户来到（不敞开）以后标签页时，插件会临时进行轮询的行为。从新回到页面后，会立即查看一次并开启轮询。

是否独自起一个 web worker 跑检测更新工作

看到有相似性能的插件会独自起一个 worker 来运行检测更新工作，为了不影响主线程。

集体感觉没有太大必要，因为检测更新工作只是简略的 fetch json 文件，而后做下本地与近程的版本比照，应该能够说是毫无压力。反而运行一个 web worker 会占用内存和 cpu。

插件对打包内容做了哪些变动

源码

monorepo 模式组织代码，原理简略，代码也比较简单。

core: 次要是如何获取版本号。

injectScript: 注入到客户端运行的代码。

injectStyle: 预置的 Notification css 款式。

vite plugin: vite 插件的实现。

webpack plugin: webpack 插件的实现。

umi plugin: umi 插件的实现。

e2e test: vite 插件的基于 playwright 的 e2e 测试。

为什么不应用 ** 计划?

websocket

须要一个 websocket 服务, 还须要后端配合。

service worker（pwa）

印像中老版本的 vue-router 文档就是基于 service worker 做的更新告诉。

接入 service worker 须要老本，本地运行一个 worker 也会占用内存和 cpu 资源。

国内并不风行 pwa。

最次要是的它具备拦挡并解决网络申请的能力，如果你不相熟，很有可能造成强缓存，手动强制刷新页面都无奈更新。参考审慎解决 Service Worker 的更新。

如果非要应用的话，倡议应用 vite-plugin-pwa，插件曾经内置了更新提醒性能，开发也不必关怀如何更新 sw.js。

比照 html 文件里引入的 js 文件 hash 值

不反对监听动态资源的更新。

轮询加载 version.json 应该比加载 index.html 对服务器的压力小些吧。

如 webpack 打包时给文件门路加 hash 的性能是能够被敞开的。

查看 index.html Response head 的 Etag、Last-Modified 值

须要服务端开启缓存。另外, 一些代理服务和负载平衡设施也可能在转发 HTTP 申请和响应时在 Etag 和 Last-Modified 之前去除这些头信息，以缩小网络负载和进步性能。

不反对监听动态资源的更新。