ASP.NET Core缓存静态资源
背景
缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能。在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间。在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件。
虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序。当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件。
方案:
为确保用户始终使用最新版本的文件,我们必须为每个文件版本提供一个唯一的URL。有很多策略:
- 使用查询字符串:
http://sample.com/file.js?v=123
- 重命名文件:
http://sample.com/file.123.js
- 创建一个目录:
http://sample.com/123/file.js
ASP.NET Core提供了一种使用 TagHelper
来追加版本与查询字符串的机制。它支持以静态资源为目标的最常见的HTML标签:script
,link
和img
。所有你需要做的是在对应Html标签中追加asp-append-version="true"
:
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="~/js/site.js" asp-append-version="true"></script>
<img src="~/images/banner1.svg" asp-append-version="true" />
在浏览器中的展现:
<link rel="stylesheet" href="/css/site.css?v=1wp5zz4e-mOPFx4X2O8seW_DmUtePn5xFJk1vB7JKRc" />
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<img src="/images/banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk" />
每个文件都会有对应的V值,并存储在一个IMemoryCache
文件的URL现在是唯一的,并且会在文件更改时更改,所以我们可以将缓存头添加到响应中,以指示客户端文件可以永久存储在缓存中
实践
为了指示浏览器将文件存储在缓存中,我们必须发送Cache-control
头文件和Expires
头文件以实现HTTP/1.0
兼容性。为了添加这些头文件,我们使用了OnPrepareResponse
回调函数StaticFilesOptions
。我们来修改这个Startup.cs
文件:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = context =>
{
//缓存一年
if (!string.IsNullOrEmpty(context.Context.Request.Query["v"]))
{
context.Context.Response.Headers.Add("cache-control", new[] { "public,max-age=31536000" });
context.Context.Response.Headers.Add("Expires", new[] { DateTime.UtcNow.AddYears().ToString("R") }); // Format RFC1123
}
}
}); app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
可以查看开发者控制台,发现静态资源都被缓存:
如果不想缓存某个静态文件,修改Startup.cs
文件:
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = context =>
{
//缓存一年
//以下操作是UseStaticFiles内部默认实现
if (!string.IsNullOrEmpty(context.Context.Request.Query["v"]))//资源添加asp-append-version="true"后v是查询参数
{
//context.Context.Response.Headers.Add("cache-control", new[] { "public,max-age=31536000" });
context.Context.Response.Headers.Add("cache-control", new[] { "public,no-cache" });
context.Context.Response.Headers.Add("Expires", new[] { DateTime.UtcNow.AddYears().ToString("R") }); // Format RFC1123
}
}
});
会发现无论怎么刷新,site.js?v=7mkNbU1tgQL1bUeZe3j2R151hKLhLDKO4BBaR-iqCy0文件永远都是重新请求,并没有使用缓存机制
结论
使用HTTP缓存对于性能方面的原因(客户端和服务器端)非常重要。使用ASP.NET Core,您可以利用提供的功能TagHelpers
来生成版本控制的URL,并更改默认配置StaticFilesMiddleware为资源Urls
添加header的Cache-control属性
。
ASP.NET Core缓存静态资源的更多相关文章
- 这样入门asp.net core 之 静态文件
本文章主要说明asp.net core中静态资源处理方案: 一.静态文件服务 首先明确contentRoot和webroot这两个概念 contentRoot:web的项目文件夹,其中包含webroo ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- ASP.NET Core 缓存技术 及 Nginx 缓存配置
前言 在Asp.Net Core Nginx部署一文中,主要是讲述的如何利用Nginx来实现应用程序的部署,使用Nginx来部署主要有两大好处,第一是利用Nginx的负载均衡功能,第二是使用Nginx ...
- tips 前端 阻止 浏览器缓存静态资源
手机浏览器 uc上一直表现良好 qq浏览器还有微信上网址直接打开的(一样采用qq浏览器的内核) 大量缓存了静态资源 css js 图片 等这些当出现改动了刷新网页根本没有效果 电脑端浏览器没有问题 因 ...
- Redis 入门与 ASP.NET Core 缓存
目录 基础 Redis 库 连接 Redis 能用 redis 干啥 Redis 数据库存储 字符串 订阅发布 RedisValue ASP.NET Core 缓存与分布式缓存 内存中的缓存 ASP. ...
- asp.net core 之静态文件目录的操作
文章前言 之前写了一篇关于模拟登录的文章,自我感觉内容不太丰富,今天的这篇文章,希望在内容上能丰富些.本人缺少写文章的经验,技术上也是新手,但我会努力的,希望大家多多支持小弟. asp.net cor ...
- Asp.net Core 缓存 MemoryCache 和 Redis
Asp.net Core 缓存 MemoryCache 和 Redis 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 经过 N 久反复的尝试,翻阅了网上无数的资料,GitH ...
- nginx缓存静态资源,只需几个配置提升10倍页面加载速度
nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求: 1.png 可以看到,静态资源占用了整个页面加载用时的90 ...
- ASP.NET Core使用静态文件、目录游览与MIME类型管理
前言 今天我们来了解了解ASP.NET Core中的静态文件的处理方式. 以前我们寄宿在IIS中的时候,很多静态文件的过滤 和相关的安全措施 都已经帮我们处理好了. ASP.NET Core则不同,因 ...
随机推荐
- WebService文件上传相关配置(404.13、超出限制、超时)
最近在做文件上传的功能,遇到一些问题,记录如下,以备以后使用. 1.HTTP Error 404.13 - Not Found,请求筛选模块被配置为拒绝超过请求内容长度的请求. IIS默认允许请求长度 ...
- OpenCV中的绘图函数-OpenCV步步精深
OpenCV 中的绘图函数 画线 首先要为画的线创造出环境,就要生成一个空的黑底图像 img=np.zeros((512,512,3), np.uint8) 这是黑色的底,我们的画布,我把窗口名叫做i ...
- Js全选 添加和单独删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FreeType in OpenCASCADE
FreeType in OpenCASCADE eryar@163.com Abstract. FreeType is required for text display in the 3D view ...
- [mysql使用(1)] 64位Linux下安装mysql-5.7.13-linux-glibc2.5-x86_64
由于公司临时让将Oracle的数据移植到mysql上面,所以让我在公司服务器上面安装一下mysql.下面就是我的安装过程以及一些错误解决思路.其实对于不同版本安装大体都有差不多. 1. 从官网下载 m ...
- time函数获取时间与本地时间不一致
修改php.ini,将“date.timezone”项修改为“date.timezone = PRC”. 大陆内地可用的值是:Asia/Chongqing ,Asia/Shanghai ,Asia/U ...
- LeetCode 287. Find the Duplicate Number (找到重复的数字)
Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...
- LeetCode 110. Balanced Binary Tree (平衡二叉树)
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- css中居中方法小结
---恢复内容开始--- 1.文字垂直居中 .header_nav-item{ height:38px; line-height:38px; } 即文字所在模块的高度和行高设置成一样的! 2.块元素垂 ...
- hdu 6215 -- Brute Force Sorting(双向链表+队列)
题目链接 Problem Description Beerus needs to sort an array of N integers. Algorithms are not Beerus's st ...