HTML页面自动清理js、css文件的缓存（自动添加版本号）

为了解决用户访问网站时，由于浏览器缓存而读取了旧版本的js、css文件而导致网页无法正确渲染的问题，需要对网站中的js、css文件进行版本控制，并自动清理浏览器缓存。

1. 添加版本控制

在引用js、css文件时，添加版本号。可以采用以下两种方式：

1.1 引用文件名添加版本号

在引用js、css文件时，在文件名后面添加?v=版本号

<link rel="stylesheet" href="/css/style.css?v=1.0">
<script src="/js/script.js?v=1.0"></script>

版本号可以使用时间戳或版本号进行标识，例如：

<link rel="stylesheet" href="/css/style.css?v=202106011400">
<script src="/js/script.js?v=1.1"></script>

1.2 引用路径添加版本号

将文件路径中添加版本号，可以采用以下方式：

<link rel="stylesheet" href="/css/1.0/style.css">
<script src="/js/1.0/script.js"></script>

这时，在服务端，可以将文件的版本号添加到文件路径中，例如：

<link rel="stylesheet" href="/css/1.0/style.css?version=202106011400">
<script src="/js/1.0/script.js?version=1.1"></script>

2. 自动清理浏览器缓存

可以借助于gulp-rev、gulp-rev-collector实现自动清理浏览器缓存。具体步骤如下：

2.1 安装gulp及相关插件

npm install gulp gulp-rev gulp-rev-collector --save-dev

2.2 gulp任务配置

在gulpfile.js文件中添加以下任务：

var gulp = require('gulp');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');

gulp.task('rev-css', function(){   //为css添加hash编码
    return gulp.src('src/css/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});

gulp.task('rev-js', function(){    //为js添加hash编码
    return gulp.src('src/js/*.js')
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});

gulp.task('rev', ['rev-css', 'rev-js'], function() {  //html模板内，静态资源添加hash编码
    return gulp.src(['rev/**/*.json', 'src/index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['rev']);   //执行gulp默认任务

其中，rev-css和rev-js任务分别为css和js添加hash编码，rev任务为html模板内静态资源添加hash编码。

2.3 配置nginx

在nginx配置文件中添加以下内容：

location ~* \.(js|css)$ {
    expires 1d;
    add_header Cache-Control "public, no-transform";
}

配置文件中需要修改root指向dist文件夹。

2.4 示例说明

例如，在原始文件夹src中存在以下文件：

├── css
│   ├── style.css
│   └── app.css
├── js
│   ├── index.js
│   ├── main.js
│   └── lib.js
└── index.html

执行gulp任务后，在新建文件夹dist中会生成以下样式：

├── css
│   ├── style-1f8ce40a.css
│   └── app-2b298ef1.css
├── js
│   ├── index-ca64fa6c.js
│   ├── main-726cf8a4.js
│   └── lib-5c7a2a6b.js
└── index.html

并在新建文件夹rev中生成以下json文件：

├── css
│   └── rev-manifest.json
└── js
    └── rev-manifest.json

此时，index.html文件中引用静态资源文件的代码变为：

<link rel="stylesheet" href="/css/style-1f8ce40a.css">
<link rel="stylesheet" href="/css/app-2b298ef1.css">
<script src="/js/index-ca64fa6c.js"></script>
<script src="/js/main-726cf8a4.js"></script>
<script src="/js/lib-5c7a2a6b.js"></script>

同时，浏览器在请求文件时会自动添加版本号，例如：

Request URL: http://www.example.com/css/style.css?version=1.0

总结

通过添加版本控制和自动清理浏览器缓存的方式可以有效解决网页无法正确渲染的问题。可以采用gulp配合nginx实现自动化编译和自动清理缓存。