hrefjs改变link_ASP.netCoreMVC项目给js文件添加版本号

需求&＃xff1a;使用ASP.net Core Mvc开发公司内部web系统&＃xff0c;给视图中js(css,image也可以)文件添加版本号避免缓存问题。

解决方法&＃xff1a;利用Taghelper提供的标签(asp-append-version)可以实现

script>

效果&＃xff1a;

备注&＃xff1a;刷新页面js版本号不会变化&＃xff0c;直到变动js内容变化&＃xff0c;版本号才会变化。下文根据源码&＃xff0c;了解asp-append-version是如何实现的。

if (AppendVersion &＃61;&＃61; true)
{
EnsureFileVersionProvider();if (Href !&＃61; null)
{
var index &＃61; output.Attributes.IndexOfName(HrefAttributeName);
var existingAttribute &＃61; output.Attributes[index];
output.Attributes[index] &＃61; new TagHelperAttribute(
existingAttribute.Name,
FileVersionProvider.AddFileVersionToPath(ViewContext.HttpContext.Request.PathBase, Href),
existingAttribute.ValueStyle);
}
}

private void EnsureFileVersionProvider()
{if (FileVersionProvider &＃61;&＃61; null)
{
FileVersionProvider &＃61; ViewContext.HttpContext.RequestServices.GetRequiredService();
}
}

解析IFileVersionProvider的实现&＃xff0c;然后调用AddFileVersionToPath方法添加版本号&＃xff0c;AddFileVersionToPath源码如下&＃xff1a;

public string AddFileVersionToPath(PathString requestPathBase, string path)
{if (path &＃61;&＃61; null)
{
throw new ArgumentNullException(nameof(path));
}
var resolvedPath &＃61; path;
var queryStringOrFragmentStartIndex &＃61; path.IndexOfAny(QueryStringAndFragmentTokens);if (queryStringOrFragmentStartIndex !&＃61; -1)
{
resolvedPath &＃61; path.Substring(0, queryStringOrFragmentStartIndex);
}if (Uri.TryCreate(resolvedPath, UriKind.Absolute, out var uri) && !uri.IsFile)
{// Don&＃39;t append version if the path is absolute.
return path;
}if (Cache.TryGetValue(path, out string value))
{
return value;
}
var cacheEntryOptions &＃61; new MemoryCacheEntryOptions();
cacheEntryOptions.AddExpirationToken(FileProvider.Watch(resolvedPath));
var fileInfo &＃61; FileProvider.GetFileInfo(resolvedPath);if (!fileInfo.Exists &&
requestPathBase.HasValue &&
resolvedPath.StartsWith(requestPathBase.Value, StringComparison.OrdinalIgnoreCase))
{
var requestPathBaseRelativePath &＃61; resolvedPath.Substring(requestPathBase.Value.Length); cacheEntryOptions.AddExpirationToken(FileProvider.Watch(requestPathBaseRelativePath));
fileInfo &＃61; FileProvider.GetFileInfo(requestPathBaseRelativePath);
}if (fileInfo.Exists)
{ value &＃61; QueryHelpers.AddQueryString(path, VersionKey, GetHashForFile(fileInfo));
}else
{// if the file is not in the current server.
value &＃61; path;
}
cacheEntryOptions.SetSize(value.Length * sizeof(char)); value &＃61; Cache.Set(path, value, cacheEntryOptions);
return value;
}private static string GetHashForFile(IFileInfo fileInfo)
{
using (var sha256 &＃61; CryptographyAlgorithms.CreateSHA256())
{
using (var readStream &＃61; fileInfo.CreateReadStream())
{
var hash &＃61; sha256.ComputeHash(readStream); return WebEncoders.Base64UrlEncode(hash);
}
}
}

通过AddFileVersionToPath源码可以弄明白&＃xff1a;

• js版本号 如何实现的&＃xff1f;

在GetHashForFile方法&＃xff0c;根据文件的内容利用SHA256算法得到其hash值&＃xff0c;然后通过url编码得到js的版本号如&＃xff1a;?v&＃61;b_XmH4_MtWTW4959ESAEqaO3-Tqh9QSlrJgwrQ1YplA

• 为什么更改了js文件内容&＃xff0c;版本号会改变&＃xff1f;

第一次得到版本号&＃xff0c;会放入缓存中( value &＃61; Cache.Set(path, value, cacheEntryOptions);)&＃xff0c;同时缓存添加过期条件&＃xff0c;判断依据文件是否发生变化( cacheEntryOptions.AddExpirationToken(FileProvider.Watch(requestPathBaseRelativePath));)&＃xff0c;否-直接或从缓存中获取。是-调用GetHashForFile方法重新生成。

动手添加个获取版本号的扩展方法

public static class HttpContextExtends
{public static string AddFileVersionToPath(this HttpContext context, string path)
{return context
.RequestServices
.GetRequiredService()
.AddFileVersionToPath(context.Request.PathBase, path);
}
}

view中使用

&＃64;section pageScript
{

效果