41、当你在 index.html 中引用了一个公共文件（比如 common.js），修改这个文件后，用户访问页面时仍然看到旧内容，因为浏览器缓存了旧版本

由于浏览器缓存导致公共文件无法更新。当用户修改了公共文件（如 JavaScript 或 CSS），但 index.html 中引用的文件名没有变化，浏览器会认为文件没有更新，继续使用缓存的旧版本。因此，需要通过某种方式让浏览器知道文件已经更新，从而获取最新版本。

核心思想：改变文件的引用路径，使浏览器认为这是一个新的资源，从而绕过缓存。常见的方法包括添

问题现象

当你在 index.html 中引用了一个公共文件（比如 common.js），修改这个文件后，用户访问页面时仍然看到旧内容，因为浏览器缓存了旧版本。

问题原因

浏览器会缓存静态文件（如 JS/CSS），当文件内容变化但文件名 / 路径不变时，浏览器会认为文件未更新，直接使用缓存。

解决方案：强制浏览器加载最新文件

核心思路：让浏览器认为文件是 “新资源”，从而绕过缓存。

方法 1：文件名加时间戳（手动）

在文件路径后面添加当前时间，每次更新文件时时间不同，浏览器就会认为是新文件。

示例：

html

<!-- 修改前 -->
<script src="/static/js/common.js"></script><!-- 修改后 -->
<script src="/static/js/common.js?t=202310101530"></script>

实现方式：

• 在代码中动态生成时间戳：

  javascript

  // 前端代码示例
  const timestamp = Date.now(); // 获取当前时间戳
  

方法 2：构建工具自动加哈希（推荐）

使用 Webpack/Vite 等工具，在打包时自动给文件名添加哈希值（根据文件内容生成），内容变化时哈希值也会变。

示例：

javascript

// Webpack 配置示例
output: {filename: '[name].[contenthash].js', // 输出文件名带哈希
}

生成结果：

html

<script src="/static/js/common.abc123.js"></script>

加时间戳、版本号或哈希值到文件名或 URL 参数中。