@tdft/vite-plugin-build-version

天道金科前端自动刷新页面 vite 插件。

背景

前端每次发布都会生成新的资源（JS、CSS、图片），删除旧的资源，而停留在旧的页面只能加载旧的资源，而旧资源可能已经被删除了，所以可能会出现无法加载的情况。

而因为前端使用了懒加载提升页面加载性能，只有发生跳转时才会去请求对应页面的资源，也就表现为路由跳转失败。

之前的处理方式是在资源加载失败时提示用户刷新页面，这样对用户来说体验不好，所以需要想办法优化逻辑。

考虑到我们一般在晚上发布，而一晚上过去 token 过期需要重新登录，如果在用户登录时判断有没有新版本，有就强制刷新页面再进入系统，这样可以避免大多数因为发布新旧资源导致的问题。 之前已经在资源加载失败时添加了错误提示，让用户刷新页面加载新的 html 文件从而使用新的资源。

这就是开发这个插件的原因。

使用方式

这个插件包含两部分，一部分是 Vite 插件，另一部分是浏览器方法，内置了部分功能。

Vite 插件

import { buildVersionPlugin } from '@tdft/vite-plugin-build-version/plugin'

plugins: [
  buildVersionPlugin()
]

浏览器方法

import { checkBuildVersion, redirectTo } from '@tdft/vite-plugin-build-version'
 
// 建议用法
checkBuildVersion().then(({ status }) => {
  if (!status) {
    redirectTo()
  }
  
  // other things
})

如果不满足需求，可以自己写处理逻辑，可以从 window.buildVersion 获得当前版本，通过请求项目目录的 version.json 文件获得最新版本。

注意：暂时不支持 history 路由方式，如有项目需要，可联系 @王悦天 添加。