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

背景：

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

解决：

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

 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下载最新代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论