ASP.NET MVC 中的 CSS/JS 自动版本控制？

Question

所以我正在阅读这篇 stackoverflow 帖子 ASP.NET MVC 中针对 CSS/JS 文件的“自动版本控制”，并且想知道执行此操作的“最佳”策略是什么。

提供的解决方案会插入一个程序集编号 - 这意味着每次发布时 - 它都会更改每个文件，这不理想，因为如果您仅对 1 *.css 或 *.js 进行修改，那么它就会更改每个文件。

1）如何仅针对“单个文件”而不是使用修改日期或 IIS7 上的其他内容来使用站点范围的程序集？

2）此外，如果我有某种“静态”资产，例如 - http://static.domain。 com/js/123.js - 如果有人将此静态链接集成到他们的网站上，我如何使用重写来发送请求的最新文件？

即 http://static.domain.com/js/123.js 是链接当收到此请求时 - 检查并发送最新文件？

Answer 1

ASP.NET 4.5+ 附带了 内置捆绑&缩小框架
旨在解决这个问题。

如果您绝对需要一个简单的自行解决方案，您可以使用下面的答案，但我总是说正确的方法是使用捆绑和解决方案。缩小框架。

---

您可以像这样修改 AssemblyInfo.cs 文件：

Change
[assembly: AssemblyVersion("1.0.0.0")]
to    
[assembly: AssemblyVersion("1.0.*")]

这意味着每次构建项目时，它都会有一个比前一个版本更高的新程序集版本。现在您有了唯一的版本号。

创建一个 UrlHelperExtension 类，该类将帮助在视图中需要时获取此信息：

public static class UrlHelperExtensions
{
    public static string ContentVersioned(this UrlHelper self, string contentPath)
    {
        string versionedContentPath = contentPath + "?v=" + Assembly.GetAssembly(typeof(UrlHelperExtensions)).GetName().Version.ToString();
        return self.Content(versionedContentPath);
    }
}

您现在可以通过以下方式轻松地将版本号添加到视图中：

<link href="@Url.ContentVersioned("style.css")" rel="stylesheet" type="text/css" />

当查看页面源时，您可以现在会有类似的东西

<link href="style.css?v=1.0.4809.30029" rel="stylesheet" type="text/css" />

Answer 2

更新：以前的版本无法在 Azure 上运行，我在下面进行了简化和更正。 （请注意，要在 IIS Express 的开发模式下工作，您需要安装 Microsoft http://www.iis.net/downloads/microsoft/url-rewrite - 它使用 WebPi 安装程序，请确保先关闭 Visual Studio）

如果您想更改实际名称文件，而不是附加查询字符串（静态文件的某些代理/浏览器会忽略它）您可以按照以下步骤操作：（我知道这是一篇旧帖子，但我在开发解决方案时遇到了它：

如何做：每次构建项目时自动增加程序集版本，并将该数字用于您想要保持刷新的特定资源上的路由静态文件（因此，something.js 被包含为。 Something.v1234.js 与1234 每次构建项目时都会自动更改） - 我还添加了一些附加功能，以确保在生产中使用 .min.js 文件，在调试时使用常规 .js 文件（我正在使用 WebGrease 来自动化缩小过程）一这个解决方案的好处是它可以在本地/开发模式以及生产模式下工作。 （我使用的是 Visual Studio 2015 / Net 4.6，但我相信这也适用于早期版本。

第 1 步：在构建时在程序集上启用自动增量
在 AssemblyInfo.cs 文件（位于项目的“属性”部分下）中，将以下行：更改

[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

为

[assembly: AssemblyVersion("1.0.*")]
//[assembly: AssemblyFileVersion("1.0.0.0")]

步骤 2： 在 web.config 中为具有嵌入版本别名的文件设置 url 重写（请参阅步骤3）

在 web.config （项目的主要配置）中，在 部分添加以下规则，我将其直接放在 结束标记

<rewrite>
  <rules>
    <rule name="static-autoversion">
      <match url="^(.*)([.]v[0-9]+)([.](js|css))$" />
      <action type="Rewrite" url="{R:1}{R:3}" />
    </rule>
    <rule name="static-autoversion-min">
      <match url="^(.*)([.]v[0-9]+)([.]min[.](js|css))$" />
      <action type="Rewrite" url="{R:1}{R:3}" />
    </rule>
  </rules>
</rewrite>

js 和 css 文件中创建版本别名。

第 3 步： 设置应用程序变量以读取当前的程序集版本并在 Global.asax 中的 cs（位于项目根目录中）将以下代码添加到 protected void Application_Start()（注册行之后）

            // setup application variables to write versions in razor (including .min extension when not debugging)
            string addMin = ".min";
            if (System.Diagnostics.Debugger.IsAttached) { addMin = ""; }  // don't use minified files when executing locally
            Application["JSVer"] = "v" + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString().Replace('.','0') + addMin + ".js";
            Application["CSSVer"] = "v" + System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString().Replace('.', '0') + addMin + ".css";

第 4 步： 使用我们设置的应用程序变量更改 Razor 视图中的 src 链接 在 Global.asax.cs 中

@HttpContext.Current.Application["CSSVer"]
@HttpContext.Current.Application["JSVer"]

例如，

<!-- Load all stylesheets -->
<link rel='stylesheet' href='https://fontastic.s3.amazonaws.com/8NNKTYdfdJLQS3D4kHqhLT/icons.css' />
<link rel='stylesheet' href='/Content/css/[email protected]["CSSVer"]' />
<link rel='stylesheet' media='(min-width: 700px)' href='/Content/css/[email protected]["CSSVer"]' />
<link rel='stylesheet' media='(min-width: 700px)' href='/Content/css/[email protected]["CSSVer"]' />
@RenderSection("PageCSS", required: false)

，在我的 _Layout.cshtml 的 head 部分中，我有以下样式表代码块：这里需要注意几件事：1) 没有扩展名在文件上。 2）也没有.min。这两个文件都是由 Global.asax.cs 中的代码处理的

。同样，（也在 _Layout.cs 中）在我的 javascript 部分：我有以下代码：

<script src="~/Scripts/all3bnd100.min.js" type="text/javascript"></script>
<script src="~/Scripts/[email protected]["JSVer"]" type="text/javascript"></script>
@RenderSection("scripts", required: false)

第一个文件是我创建的所有 3rd 方库的捆绑包手动使用 WebGrease。如果我添加或更改捆绑包中的任何文件（这种情况很少见），那么我会手动将文件重命名为 all3bnd101.min.js、all3bnd102.min.js 等...此文件与重写处理程序不匹配，因此将保留在客户端浏览器上缓存，直到您手动重新捆绑/更改名称。

第二个文件是 ui.js （将被写入 ui.v12345123.js 或 ui.v12345123.min.js，具体取决于您是否在调试模式下运行）这将被处理/重写。 （您可以在 Global.asax.cs 的 Application_OnBeginRequest 中设置断点来观察其工作情况）

对此的完整讨论：简化了 ASP.NET MVC 5 中 Javascript / CSS 的自动版本控制以停止缓存有或没有 URL 重写的问题（在 Azure 和本地工作） （包括不使用 URL 重写的方法）

Answer 3

1）
请改用文件修改时间。这是一个示例：

public static string GeneratePathWithTime(string cssFileName)
{
  var serverFilePath = server.MapPath("~/static/" + cssFileName);
  var version = File.GetLastWriteTime(serverFilePath).ToString("yyyyMMddhhmmss");
  return string.Format("/static/{0}/{1}", version, cssFileName);
}

这将为“style.css”生成类似“/static/201109231100/style.css”的路径（假设您的 style.css 位于 static 目录中）。
然后，您将在 IIS 中添加重写规则，将“/static/201109231100/style.css”重写为“/static/style.css”。版本号只有在css文件被修改时才会改变，并且仅适用于修改过的文件。

2）
您可以通过 HttpModule 处理对 123.js 的请求并发送其最新内容，但我认为您不能保证请求获得最新版本。这取决于浏览器如何处理其缓存。您可以在响应标头中设置较早的过期时间（例如一分钟前），以告诉浏览器始终重新下载文件，但这完全取决于浏览器本身来决定是否重新下载文件。这就是为什么我们每次更新问题 1) 中的文件时都需要为修改后的文件生成不同的路径，如果以前从未访问过该 URL，则浏览器将始终尝试下载该文件。

Answer 4

我编写了一个 Url Helper 来为我执行 CacheBusting。

public static string CacheBustedContent(this UrlHelper helper, string contentPath)
{
    var path = string.Empty;

    if (helper.RequestContext.HttpContext.Cache["static-resource-" + contentPath] == null)
    {
        var fullpath = helper.RequestContext.HttpContext.Server.MapPath(contentPath);
        var md5 = GetMD5HashFromFile(fullpath);
        path = helper.Content(contentPath) + "?v=" + md5;

        helper.RequestContext.HttpContext.Cache.Add("static-resource-" + contentPath, path, null, System.Web.Caching.Cache.NoAbsoluteExpiration, new TimeSpan(24, 0, 0), System.Web.Caching.CacheItemPriority.Default, null);
    }
    else
    {
        path = helper.RequestContext.HttpContext.Cache["static-resource-" + contentPath].ToString();
    }

    return path;
}

您可以将 GetMD5HashFromFile() 替换为 CRC 或任何其他类型的调用，这些调用会根据文件的内容或上次修改日期生成唯一的字符串。

缺点是每当缓存失效时就会调用它。如果您以某种方式实时更改文件，但不重置应用程序池，您可能需要触摸 web.config 才能使其正确重新加载。

Answer 5

这个问题现在确实很老了，但如果有人偶然发现它，据我所知，这是当前的技术水平：

1. 在 ASP.NET Core 中，您可以使用 TagHelpers 并只需添加 asp-append-version< /code> 属性到任何 或 ;

2. 对于 ASP.NET Core 和 Framework，都有一个名为 WebOptimizer 的 NuGet 包 (https://github.com/ligershark/WebOptimizer）。它允许捆绑和缩小，并且还会将基于内容的版本字符串附加到您的文件中。

3. 如果您想自己执行此操作，可以使用方便的 IFileVersionProvider 接口，您可以从 .NET Core 中的 IServiceProvider 获取该接口：

   // 这个例子假设，你至少有一个 HttpContext
   var fileVersionProvider = httpContext.RequestServices.GetRequiredService();
   字符串路径 = httpContext.Content("/css/site.css");
   字符串pathWithVersionString = fileVersionProvider.AddFileVersionToPath(httpContext.Request.PathBase, 路径);
   

   对于 .NET Framework，您可以从此处获取 FileVersionProvider 源：https://github.com/dotnet/aspnetcore/blob/main/src/Mvc/Mvc.Razor/src/Infrastruct/DefaultFileVersionProvider.cs< /a>
   您必须做一些工作，例如用 MemoryCache.Default 或 ConcurrentDictionary 或其他东西替换缓存，但“肉”就在那里。

   
   

Answer 6

您可能想看看 Dean Hume 的博客文章 MVC 和HTML5 应用程序缓存。在那篇文章中，他指出了一种自动处理每个请求版本控制的优雅方法，使用 @ShirtlessKirk：

@Url.Content("~/Content/Site.css").AppendHash(Request)