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-Control
或Expires
),这些指令可能会告诉浏览器缓存文件更长的时间,即使文件名(和哈希值)发生了变化。 - 服务器或CDN缓存:如果你的应用部署在具有缓存层的服务器或CDN后面,这些缓存层可能会缓存旧的文件版本,即使文件名已经变化。
- 浏览器行为:某些浏览器或插件可能有自己的缓存机制,这些机制可能不总是按预期工作。
为什么[name].[hash].js
通常不需要清除浏览器缓存?
由于[name].[hash].js
中的哈希值是基于整个构建内容的,即使单个文件的内容没有变化,但其他文件的变动也可能导致哈希值变化,进而改变文件名。这通常意味着浏览器会忽略缓存并重新下载该文件,因此不需要手动清除浏览器缓存。
总结:
[name]-[hash].js
和[name].[hash].js
的主要区别在于哈希值的计算方式和范围。- 在大多数情况下,
[name]-[hash].js
能够确保浏览器在文件内容变化时下载最新文件,但有时可能需要清除缓存。 [name].[hash].js
由于哈希值基于整个构建内容,通常不需要手动清除浏览器缓存即可确保下载最新文件。
到此这篇关于vite+vue3不清除浏览器缓存直接下载最新代码的解决方案的文章就介绍到这了,更多相关vite vue3下载最新代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue2实现directive自定义指令的封装与全局注册流程
自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下2023-02-02
最新评论