正文

如何设置网页JS代码不缓存，避免每次刷新后加载新版本

/0 浏览量
0420

在网页开发中，有时候我们希望JavaScript文件（JS）在每次刷新时都加载最新的版本，而不是从浏览器缓存中加载旧的版本。以下是一些常用的方法来设置网页JS代码不缓存：

1. 使用查询字符串（Query String）

在JavaScript文件的URL后添加一个查询字符串参数，每次修改文件时改变这个参数的值，就可以强制浏览器不使用缓存。

示例代码：

<script src="your-js-file.js?v=1.0.0"></script>

每次更新JS文件时，只需修改版本号即可：

<script src="your-js-file.js?v=1.0.1"></script>

这种方法简单有效，但可能对SEO有轻微影响，因为每次URL都会变化。

2. 使用ETag

ETag（实体标签）是一个验证实体是否改变的HTTP响应头。通过设置ETag，可以告诉浏览器是否需要重新下载资源。

示例代码：

在服务器端配置ETag：

ETag: "your-file-version"

每次更新JS文件时，更改ETag的值：

ETag: "your-file-new-version"

这种方法需要服务器端的支持，且可能对缓存策略有一定影响。

3. 使用Cache-Control头

通过设置HTTP响应头中的Cache-Control，可以控制资源的缓存行为。

示例代码：

Cache-Control: no-cache, no-store, must-revalidate

这条规则表示资源不能被缓存，每次请求都必须重新验证。

4. 使用Service Worker

Service Worker是一个运行在浏览器背后的脚本，可以拦截和处理网络请求，从而控制资源的加载。

示例代码：

创建一个Service Worker文件（service-worker.js）：

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/your-js-file.js'
            ]);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

在HTML中注册Service Worker：

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js');
    }
</script>

使用Service Worker可以更好地控制资源的加载和缓存，但实现起来相对复杂。

总结

以上方法可以帮助您设置网页JS代码不缓存，避免每次刷新后加载新版本。选择合适的方法取决于您的具体需求和服务器环境。

-- 展开阅读全文 --