vite+vue3不清除浏览器缓存直接下载最新代码的解决方案

 更新时间:2024年06月14日 11:00:42   作者:Cola-blog  
vite+vue3项目发布后,浏览器上还是旧代码,没有及时更新到最新代码,下面通过本文给大家分享vite+vue3不清除浏览器缓存直接下载最新代码的解决方案,感兴趣的朋友一起看看吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

背景:

vite+vue3项目发布后,浏览器上还是旧代码,没有及时更新到最新代码。

解决:

vite采用的rollup打包。rollup打包默认输出文件格式[name]-[hash].js,将输出格式改为[name].[hash].js解决了上述问题。

1
2
3
4
5
6
7
8
9
build: {
     rollupOptions: {
       output: {
         entryFileNames: `assets/[name].[hash].js`,
         chunkFileNames: `assets/[name].[hash].js`,
         assetFileNames: `assets/[name].[hash].[ext]`,
       }
     },
   },

原因:

[name]-[hash].js[name].[hash].js有什么区别

讨论[name]-[hash].js[name].[hash].js这两种命名方式时,浏览器缓存的行为确实是一个关键点。这两种命名策略的主要区别在于哈希值的应用范围和计算方式,这直接影响到浏览器如何识别文件的更新和是否需要清除缓存来下载新文件。

[name]-[hash].js

  • 在这种命名方式中,-连接符用于将文件名([name])和哈希值([hash])分开。这里的[hash]通常是对整个文件内容的哈希。当文件内容发生任何变化时,哈希值都会变化,从而生成一个新的文件名。
  • 缓存行为:如果文件名(包括哈希值)发生了变化,浏览器通常会认为这是一个全新的文件,因此会忽略缓存并重新下载。然而,如果构建过程中存在某些问题,导致文件内容更新但哈希值没有变化,那么浏览器可能会继续使用缓存中的旧文件,因为它认为文件名(和哈希值)没有变化。

[name].[hash].js

  • 在这种命名方式中,.点连接符用于将文件名和哈希值分开。这里的[hash]可能是基于整个构建内容的哈希,而不仅仅是单个文件的内容。这意味着即使单个文件没有变化,但如果构建过程中其他文件有变动,该文件的哈希值也可能发生变化。
  • 缓存行为:由于哈希值是基于整个构建内容的,即使单个文件没有变化,它的文件名(和哈希值)也可能因为其他文件的变动而发生变化。这通常意味着浏览器会忽略缓存并重新下载该文件,即使它的内容实际上没有变化。

为什么[name]-[hash].js有时需要清除浏览器缓存?

尽管[name]-[hash].js命名方式旨在通过哈希值来确保浏览器识别文件的更新,但在某些情况下,你可能仍然需要清除浏览器缓存:

  • 缓存控制指令:如果服务器返回的HTTP响应头中设置了缓存控制指令(如Cache-ControlExpires),这些指令可能会告诉浏览器缓存文件更长的时间,即使文件名(和哈希值)发生了变化。
  • 服务器或CDN缓存:如果你的应用部署在具有缓存层的服务器或CDN后面,这些缓存层可能会缓存旧的文件版本,即使文件名已经变化。
  • 浏览器行为:某些浏览器或插件可能有自己的缓存机制,这些机制可能不总是按预期工作。

为什么[name].[hash].js通常不需要清除浏览器缓存?

由于[name].[hash].js中的哈希值是基于整个构建内容的,即使单个文件的内容没有变化,但其他文件的变动也可能导致哈希值变化,进而改变文件名。这通常意味着浏览器会忽略缓存并重新下载该文件,因此不需要手动清除浏览器缓存。

总结:

  • [name]-[hash].js[name].[hash].js的主要区别在于哈希值的计算方式和范围。
  • 在大多数情况下,[name]-[hash].js能够确保浏览器在文件内容变化时下载最新文件,但有时可能需要清除缓存。
  • [name].[hash].js由于哈希值基于整个构建内容,通常不需要手动清除浏览器缓存即可确保下载最新文件。

到此这篇关于vite+vue3不清除浏览器缓存直接下载最新代码的解决方案的文章就介绍到这了,更多相关vite vue3下载最新代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/lx6091543wwwcctv/article/details/138964795

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 如何使用vue实现前端导入excel数据

    如何使用vue实现前端导入excel数据

    在实际开发中导入功能是非常常见的,导入功能前端并不难,下面这篇文章主要给大家介绍了关于如何使用vue实现前端导入excel数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue中的前端crypto.js加解密

    Vue中的前端crypto.js加解密

    这篇文章主要介绍了Vue中的前端crypto.js加解密问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue组件中传值EventBus的使用及注意事项说明

    vue组件中传值EventBus的使用及注意事项说明

    这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 使用van-picker 动态设置当前选中项

    使用van-picker 动态设置当前选中项

    这篇文章主要介绍了使用van-picker 动态设置当前选中项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3使用ref的性能警告问题

    vue3使用ref的性能警告问题

    这篇文章主要介绍了vue3使用ref的性能警告问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3.0列表页面做缓存的方法代码

    vue3.0列表页面做缓存的方法代码

    很多时候为了让提高用户的体验感,在页面上添加缓存,是十分有必要的, 下面这篇文章主要给大家介绍了关于vue3.0列表页面做缓存的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue2实现directive自定义指令的封装与全局注册流程

    vue2实现directive自定义指令的封装与全局注册流程

    自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue项目展示pdf文件的方法实现

    vue项目展示pdf文件的方法实现

    本文主要介绍了vue项目展示pdf文件的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3+Vant实现简单的登录功能

    Vue3+Vant实现简单的登录功能

    这篇文章主要为大家详细介绍了Vue3如何结合Vant实现简单的登录功能,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2024-04-04

最新评论