Skip to content

Webpack 页面更新检查插件

Published: at 04:35 PMSuggest Changes

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

思路

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

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

实现

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

插件源码 SetScriptTimestampPlugin.js

// 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

const SetScriptTimestampPlugin = require('./SetScriptTimestampPlugin.js')

plugins: [
  new SetScriptTimestampPlugin()
]

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

参考文章


Previous Post
LeetCode 34:在排序数组中查找元素的第一个和最后一个位置
Next Post
MySQL 连接问题及解决方案