RequireJS/MVC 项目的缓存清除

• 下载示例代码

目录

• 引言
• 缓存清除 101
• 使用 RequireJS 进行缓存清除
• 使用程序集版本
• 结合 Html Helper 使用

引言

RequireJS 生成脚本标签来加载模块。为了提高网站性能，您需要配置 IIS 发送响应头，告诉浏览器将这些模块缓存长达一年——根据 HTTP 标准的最大值 (原因；方法)。

但是，当您更新一个或多个模块时，您不希望用户继续使用旧版本长达一年。您希望他们立即更新他们的缓存。

在本文中，我们将了解如何根据运行网站代码的程序集版本进行缓存清除。下载文件包含一个可运行的示例。

缓存清除 101

让浏览器刷新其缓存非常容易。例如这个脚本标签

<script src="/Scripts/main.js" type="text/javascript"></script>

您只需在查询字符串中添加某种版本号

<script src="/Scripts/main.js?v=1.0.0.0" type="text/javascript"></script>

然后当您更新版本时

<script src="/Scripts/main.js?v=1.1.0.0" type="text/javascript"></script>

浏览器将在其缓存中查找 *main.js?v=1.1.0.0*，找不到它，然后向服务器请求它。

这种缓存清除方法有优点和缺点

• 优点 - 非常简单。因为您使用的是查询字符串，所以无需更改服务器上 main.js 的名称。
• 缺点 - 缓存性能损失。当您引入查询字符串时，代理 和 IIS 内核缓存 将不再缓存您的文件。

最佳的缓存清除方法包括更改文件名本身，例如 *main.1.1.0.0.js* 而不是 *main.js?v=1.1.0.0*。有一些包可以动态地做到这一点 (示例)，但它们不与 RequireJS 集成。因此，在本文的其余部分，我们将坚持使用查询字符串。

使用 RequireJS 进行缓存清除

RequireJS 允许您使用 *urlArgs* 配置选项向其生成的全部脚本标签添加查询字符串

<script type="text/javascript"> var require = { urlArgs: "v=1.0.0.0" }; </script>
<script data-main="Scripts/main" 
        src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.0.2/require.min.js" 
        type="text/javascript"></script>

如果您在 Chrome 中运行下载中的示例站点并检查 DOM（右键单击页面上的任意位置 | 检查元素），您会发现 RequireJS 生成了这个

使用程序集版本

到目前为止一切顺利。但是，您不希望每次进行新发布时都手动更改 HTML——这太笨拙且容易出错。

使用站点的程序集版本更有吸引力

• 易于手动更新 - 右键单击您的网站项目 | 属性 | 程序集信息。
• 可以通过 TFS Build 自动更新 (方法，方法，方法)。

您可以通过当前正在执行的程序集获取程序集版本

string version = 
    System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.ToString();

但是，如果您的站点托管在使用 中等信任级别 的共享托管公司（例如 GoDaddy），则此方法将无效，因为出于安全原因，在这样的环境中不允许调用 GetExecutingAssembly。

结合 Html Helper 使用

让我们首先创建一个返回程序集版本的 Html Helper

namespace RequireJSAndVersioning.Helpers
{
    public static class AssemblyVersionHelper
    {
        public static string AssemblyVersion(this HtmlHelper helper)
        {
            return System.Reflection.Assembly.GetExecutingAssembly()
                         .GetName().Version.ToString();
        }
    }
}

现在在您的 Razor 文件中导入 Helper 的命名空间

@using RequireJSAndVersioning.Helpers

最后，将 Helper 与 RequireJS 配置部分一起使用

<script type="text/javascript">
    var require = {
        urlArgs: "v=@Html.AssemblyVersion()"
    };
</script>
<script data-main="Scripts/main" 
        src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.0.2/require.min.js" 
        type="text/javascript"></script>

因此，每当您的站点程序集版本更改时，所有访问者的浏览器都将向您的服务器请求模块的最新版本。