首页 前端知识 Vue 项目每次发版后要清理浏览器缓存问题

Vue 项目每次发版后要清理浏览器缓存问题

2024-01-30 10:01:40 前端知识 前端哥 458 8 我要收藏

打包的时候给每个打包文件后面加一个时间戳,通过 vue.config.js 配置

const timeStamp = new Date().getTime()
module.exports = {
  // 打包的时候不使用hash值.因为我们有时间戳来确定项目的唯一性了.
  filenameHashing: false,
  configureWebpack: {
    // 输出重构 打包编译后的js文件名称,添加时间戳
    output: {
      filename: `js/[name].${timeStamp}.js`,
      chunkFilename: `js/chunk.[id].${timeStamp}.js`,
    },
  },
  css: {
    // 打包后css文件名称添加时间戳
    extract: {
      filename: `css/[name].${timeStamp}.css`,
      chunkFilename: `css/chunk.[id].${timeStamp}.css`,
    },
  },
}

这样可以解决问题,每次打包发布之后,项目不需要强制清理缓存就可以试试更新内容了。但是这时候又有一个新问题产生。 就是这样打包完发布之后,因为每次的文件名不一样,项目中偶尔会报错 ChunkLoadError: Loading chunk failed。原因就是浏览器取的是缓存中的文件名称,新打包之后,文件名称改变,导致浏览器找不到文件了 404。需要刷新页面,重新加载文件。

先说一下单独解决这个问题的方法
// 在main.js中
/* 路由异常错误处理,尝试解析一个异步组件时发生错误,重新渲染目标页面 */
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed) {
    // 用路由的replace方法,
    // 并没有相当于F5刷新页面,
    // 失败的js文件并没有从新请求,
    // 会导致一直尝试replace页面导致死循环,
    // 而用 location.reload 方法,相当于触发F5刷新页面,
    // 虽然用户体验上来说会有刷新加载察觉,但不会导致页面卡死及死循环,
    // 从而曲线救国解决该问题
    window.location.reload()
    // router.replace(targetPath);
  } else {
    console.log('no')
  }
})

当捕获到 Loading chunk {n} failed 的错误时我们重新渲染目标页面,这种实现明显更简单和友好。

结合我们上面的问题,想到了一个新的解决方式,在打包的时候,文件名称不变,使用版本号。这样也可以实现每次打包发布后不需要强制清理缓存,又不会出现找不到文件的情况

在 vue.config.js 中,将 name.timeStamp.js 改成 name.js?v=timeStamp

const timeStamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: {
      filename: `js/[name].js?v=${timeStamp}`,
      chunkFilename: `js/chunk.[id].js?v=${timeStamp}`,
    },
  },
  css: {
    extract: {
      filename: `css/[name].css?v=${timeStamp}`,
      chunkFilename: `css/chunk.[id].css?v=${timeStamp}`,
    },
  },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/845.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!