提升前端项目体验，Vite 打包更新通知方案

前言

在前端项目快速迭代的当下，如何让用户及时感知版本更新并完成更新操作，是提升用户体验和项目维护效率的关键环节。

下面，我将分享一种基于 Vite 打包实现前端项目更新通知的实用且优雅的方案。

精准禁止缓存，奠定更新基础

浏览器的缓存机制虽能提升访问速度，但在新版本发布时，却可能成为 "拦路虎"，让用户继续使用旧版本的索引页面（index.html）和版本信息文件（version.json）。为此，我们可通过 Nginx 配置，巧妙禁止对这些关键文件的缓存。

在 Nginx 中，当检测到以 .htm、.html 或 .json 结尾的文件请求时，只需将其过期时间设置为 -1，就能轻松实现不缓存的效果。

以下是具体的 Nginx 配置示例：

js 复制代码

location ~ .*(htm|html|json)?$ {  
    expires -1;  
}

Vite 插件赋能，自动生成版本信息

借助 Vite 插件的强大功能，我们可在项目打包生产代码时，自动生成版本信息文件，为后续的更新通知提供关键依据。

我们创建一个自定义的版本信息插件，在构建开始阶段，依据当前时间戳生成版本信息，并将其转换为 JSON 格式内容，写入到公共目录中的 version.json 文件。这样，每次打包都能生成一个带有最新版本信息的文件。

以下是该插件的代码实现：

js 复制代码

const fs = require('fs')  
const path = require('path')

const writeVersion = (versionFile, content) => {  
    fs.writeFile(versionFile, content, (err) => {  
        if (err) throw err  
    })  
}

export default (options) => {  
    let config  
return {  
    name: 'version-update',  
    configResolved(resolvedConfig) {  
        config = resolvedConfig  
    },  
    buildStart() {  
        const file = config.publicDir + path.sep + 'version.json'  
        const content = JSON.stringify({ version: options.version })  
        if (fs.existsSync(config.publicDir)) {  
            writeVersion(file, content)  
        } else {  
            fs.mkdir(config.publicDir, (err) => {  
                if (err) throw err  
                writeVersion(file, content)  
            })  
        }  
    },  
}

}

在 Vite 配置文件中，我们定义全局变量 APP_VERSION 来表示应用的版本，其值为当前时间戳。同时，在插件配置中引入我们自定义的版本信息插件，并传递相应的版本信息。以下是 Vite 配置文件的关键代码：

js 复制代码

export default defineConfig((config) => {  
    const now = new Date().getTime()  
    return {  
        define: {  
            __APP_VERSION__: now,  
        },  
        plugins: [  
            versionUpdatePlugin({  
                version: now,  
            }),  
        ],  
    }  
})

路由拦截，智能检测版本更新

在路由跳转时实时检测版本更新，是实现更新通知的核心环节。我们选择在路由的全局前置守卫中执行版本检查操作，以确保每次页面跳转都能及时发现版本变化。

在开发环境下，我们直接跳过检测，以免干扰开发流程；而在生产环境下，通过 axios 发送请求获取服务器端的版本信息。若本地版本与服务器端版本不一致，则弹出一个友好且醒目的提示框，告知用户发现新内容并自动更新。提示框显示片刻后自动关闭，随后进行页面重新加载，获取新的索引页面。

以下是具体的代码实现：

javascript 复制代码

// 每次路由跳转前调用  
router.beforeEach((to, from, next) => {  
    checkUpdate()  
    next()  
})

function checkUpdate() {  
    if (import.meta.env.DEV) return  
    axios.get('/version.json').then((res) => {  
        if (__APP_VERSION__ !== [res.data](http://res.data).version) {  
            MessageBox.confirm('检测到有新的版本更新，请刷新页面！！', '版本升级提示', {  
                type: 'warning',  
                showClose: false,  
                showCancelButton: false,  
                closeOnClickModal: false,  
                closeOnPressEscape: false  
            })  
            .then(() => {  
                router.go(0)  
            })  
            .catch(() => {})  
        }  
    })  
}

打包的结果，每一次打包的版本不一样，通过比对让用户去实现更新

总结

通过以上步骤，我们构建了一个完整且高效的前端项目更新通知机制。

每当用户触发路由跳转时，系统就能敏锐地察觉版本变化，及时提醒用户刷新页面，实现无缝更新，提升用户体验的同时，也极大地方便了项目的日常维护。

在前端开发的广阔天地中，实现更新通知的方式多种多样。

除了上述方案，还可以有以下的方案

借助 Service Worker 监听 fetch 事件，对比版本信息文件，发现更新后利用 postMessage 通知页面；
利用消息队列机制，服务端更新时向消息队列发送消息，前端订阅获取并执行更新流程；再如基于 WebSocket 长连接，服务端主动推送更新信息到前端。

然而，借助 Vite 打包及相关配置的方法，以其简洁、高效的特点，成为了众多开发者在实际项目中的首选方案。