0%

Webpack 检查页面是否更新插件

每次前端部署到服务器上都需要清除缓存,这样才能保证页面是最新的,不知道是什么原因

思路

前端重新部署后如何让用户刷新页面? 上的有个思路不错

哈哈哈,好巧,这是我面试题库里的题之一,我的方案是路由守卫里加实现,做法也很简单,/version.json 是发布时候的一个时间戳 - {202205234345564},beforeRoute 里有动作就请求 /version.json?{random},和当前程序里的 version 不一致就提示 并自动刷新

实现

ws 和轮训都不太行,开销太大。

插件源码 SetScriptTimestampPlugin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// SetScriptTimestampPlugin.js
const packageJson = require('./package.json')
const fs = require('fs')

class SetScriptTimestampPlugin {
apply (compiler) {
compiler.hooks.compilation.tap('SetScriptTimestampPlugin',
(compilation, callback) => {
console.log('SetScriptTimestampPlugin!')
console.log('packageJson', packageJson)
const version = {}
version.version = packageJson.version
version.buildTime = new Date().getTime()
const data = JSON.stringify(packageJson, null, 2)
fs.writeFileSync('public/version.json', data)
})
}
}
module.exports = SetScriptTimestampPlugin

配置 webpack

1
2
3
4
5
const SetScriptTimestampPlugin = require('./SetScriptTimestampPlugin.js')

plugins: [
new SetScriptTimestampPlugin()
]

然后每次修改代码了都会更新 version.json,这样就可以让用户刷新页面了,具体还是需要在项目代码中实现。

参考文章