如何在不遇到缓存 CSS 问题的情况下更新 Web 应用程序



>假设我有一个网络应用程序。 我向其添加了一些功能,这些功能需要添加到我的 Web 服务器上的一些现有 CSS 文件中。 我将我的新功能和 CSS 添加部署到我的服务器,它们运行良好。 但是,访问该网站的用户可能会在浏览器中缓存CSS,这意味着新功能看起来会损坏/奇怪,直到他们手动刷新页面或缓存过期。 如果我的服务器和用户之间有缓存服务器,问题可能会更糟,在这种情况下,即使是手动刷新也无济于事(我不认为)。

有没有一种常见的方法可以避免这种情况?

编辑:我正在运行 ASP.NET 4.0。

您可以在 css 请求的末尾添加一个任意名称值对,它将像没有缓存一样。例如:

<link media="all" href="myhomepage.css?sid=1" type="text/css" rel="stylesheet">

进行更改时,请更改 sid 值。

我在Apache中将以下内容与PHP一起使用:

function cssInclude($file) {
    $fileMTime = filemtime($_SERVER['DOCUMENT_ROOT']."/media/css/".$file.".css");
    return "<link rel="stylesheet" href="/media/css/{$file}.{$fileMTime}.css"
}

那么在我的<head>

<?= cssInclude("style"); ?>

然后在我的 .htaccess 中:

RewriteEngine on
RewriteRule ^media/(js|css|img|font)/(.+).(d+).(js|css|png|jpg|gif)$ /media/$1/$2.$4 [L]

从本质上讲,这样做是使链接有时间。最初我在 CSS 之后使用 ?,就像在 style.css?12313123 中一样,但发现一些代理没有缓存它,因为他们认为它是动态的,使其变慢(例如,我的工作搞砸了)。

通过将其编写为style.123123123.css每当修改时,它看起来就好像是一个新文件,并且缓存工作正常。

您会注意到,在我的.htaccess中,我还允许自己为不同的目录和几种不同的文件格式执行此操作 - 根据需要对其进行自定义。

当然,这意味着您正在从文件系统中读取内容,但是如果您有缓存层,那么每次更新仅执行一次。

首先,通常的做法是将版本附加到您加载的资源中。这可以通过版本参数或使用 yawr 等框架来完成。

如果您更喜欢第一个并使用版本控制,那么使用 vcs 修订字符串作为版本可能不是坏主意,或者 - 如果您确实发布周期,请使用与您的更改最匹配的版本。

在PHP或Python中,您可以生成一个包含版本字符串的文件,并在所有必需的文件中引用它。使用 Java 或 .NET,您可能希望有一个已编译的工件。

由于缺少您的设置,我不粘贴示例代码。

当然,我不知道你的设置,因为你没有提到它,但假设你有一个像Tomcat这样的serlet容器,我建议你看看Jawr。它的目的,来自网站:"Jawr是Javascript和CSS的可调打包解决方案......"

它可以做的比你要求的要多得多,但它也可以完全自动地实现@scrappedcola的想法。客户端将看到一个包含内容哈希的 URL(类似于 scripts_A5F68E2.js ),该 URL 将缓存属性设置为永恒。每次内容更改时,名称也会更改,因此客户端将重新加载脚本。

最新更新