HTML页面自动清理js、css文件的缓存

在HTML页面中自动清理JavaScript（JS）和CSS文件的缓存通常是通过在文件的URL后添加一个版本号或时间戳来实现的。这样，当文件内容发生变化时，浏览器会加载新的文件而不是从缓存中加载。

以下是一些实现这一功能的方法： 

1. 使用版本号

在构建过程中，你可以为每个文件添加一个版本号。例如，假设你有一个CSS文件styles.css，你可以将其URL更改为styles.css?v=1.2.3，其中1.2.3是版本号。

服务器端处理

• 在服务器端，你可以使用构建工具（如Webpack、Gulp、Grunt等）在文件构建过程中自动添加版本号。
• 或者，你可以使用服务器端脚本（如PHP、Node.js等）来检查文件的修改时间，并据此生成一个唯一的查询字符串。

HTML中的引用

在HTML中，你只需像这样引用文件：

<link rel="stylesheet" type="text/css" href="styles.css?v=1.2.3">  
<script type="text/javascript" src="script.js?v=1.2.3"></script>

2. 使用文件哈希值

另一种常见的做法是使用文件的哈希值作为查询字符串。这样，每当文件内容发生变化时，哈希值也会发生变化，从而确保浏览器加载新文件。

Webpack示例

如果你使用Webpack作为构建工具，它有一个内置的[contenthash]占位符，可以为每个文件生成基于文件内容的哈希值。你可以在输出文件名中使用这个占位符：

// webpack.config.js  
module.exports = {  
  // ...  
  output: {  
    filename: '[name].[contenthash].js',  
    chunkFilename: '[name].[contenthash].chunk.js',  
  },  
  // ...  
};

然后，在HTML中引用这些文件时，Webpack的HTML插件（如html-webpack-plugin）会自动为你添加正确的哈希值。

3. 使用文件修改时间戳

另一种简单的方法是在服务器端使用文件的修改时间戳作为查询字符串。这样，每当文件被修改时，时间戳都会发生变化，从而触发浏览器加载新文件。但是，这种方法的一个潜在缺点是它可能不如使用哈希值那么精确，因为文件可能在内容没有变化的情况下被修改（例如，权限更改）。

PHP示例

如果你使用PHP作为服务器端语言，你可以这样做：

<link rel="stylesheet" type="text/css" href="styles.css?<?php echo filemtime('styles.css'); ?>">  
<script type="text/javascript" src="script.js?<?php echo filemtime('script.js'); ?>"></script>

这里，filemtime()函数返回文件的最后修改时间的时间戳。