因此,我自愿参与的这个项目的项目经理告诉我,保留 index-xxxx.js 等文件的名称将有助于强制清除缓存,如果我们在脚本标记中的函数中使用它们,例如根 index.html 文件。我还被告知要复制这些文件的内容并将其保存为具有一致名称的文件。当我被告知这一点时,我很好奇,复制生成的文件的内容为什么会有帮助?

作为参考,该项目使用 Vite 和 React。我知道 vite 会生成一个包含大量资产的 dist 文件夹,index-xxxx.js 文件就是其中之一。我相当确定尝试在根 index.html 文件中使用这些文件是行不通的,因为每次构建项目时,文件都会更改名称,然后中断构建。那么我这里是不是遗漏了什么?

此外,如果能提供任何明确说明不应在 dist 文件夹之外使用的生成文件的信息,我将不胜感激。我需要 100% 确定这些生成的文件。

文件结构我希望这会有所帮助。

Project_folder
     
      dist
          assets
             index-xxxx.js
             index-xxxx.css
        index.html
      src

      index.html


最佳答案
2

是的,必须保证用户端的缓存清除。

简单来说,网站托管商可以完美地完成所有操作(设置标头、发送 cookie 等),以强制清除用户端的缓存(包括中间可能的 CDN 缓存)。但无法保证用户代理会遵守并清除缓存。使用唯一的文件名可以解决这个问题。

我认为您忽略的是,当项目构建时,对这些文件名的所有引用都将在引用它们的所有地方更新。因此,根 html 文件的内容将相应更新。

使用版本化的文件名(如 index-xxxx.js)对于清除缓存至关重要,可确保浏览器在内容更改时加载文件的最新版本。Vite 会自动处理此问题,更新生成的 index.html 中的引用。将内容复制到具有一致名称(如 index.js)的文件并使用这些名称会导致缓存问题,因为浏览器可能会提供过时的内容,并且它可能会破坏构建过程,因为 Vite 生成的文件名会随着每次构建而变化。