ASP.NET Core 中的捆绑和缩小静态资产 2020/09/02 作者：Scott Addie 和 David Pine 本文介绍应用捆绑和缩小的好处，包括如何在 ASP.NET Core Web...请求网页后，浏览器会缓存静态资产（JavaScript、CSS 和图像）。 因此，在请求相同资产的同一站点上请求相同的一个或多个页面时，捆绑和缩小不会提高性能。...如果未在资产上正确设置 expires 标头，且未使用捆绑和缩小，则浏览器的新鲜度启发会在几天后将资产标记为过期。 此外，浏览器还需要对每个资产进行验证请求。...文件越少，从浏览器到服务器或从提供应用程序的服务的 HTTP 请求就越少。 这会提高第一页加载性能。 缩小 缩小在不更改功能的情况下从代码中删除不必要的字符。...第三方工具（如 Grunt 任务运行程序）以更复杂的方式完成相同的任务。 开发工作流需要捆绑和缩小之外的其他处理（如 linting 和图像优化）时，第三方工具非常适用。
首先，我们可以通过添加defer标签来告诉浏览器，遇到这个JS，不要等加载完成再继续干活，你管你渲染网页，我管我加载： <script...可惜，由于我们控制不了用户使用的浏览器类型和版本，根据 Azure Application Insights 的后台统计，仍然有不少用户使用低版本的浏览器访问我的网站，它们并不认识 defer和 async...其实这并不奇怪，在盲目选择框架之前，我们得注意一个前提条件：SPA框架所针对的，其实是Web应用。...而应用的意思是重交互，即像Azure Portal或Outlook邮箱那样，目的是把网页当应用程来开发，这时候SPA不仅能提升用户体验，也能降低开发成本，何乐而不为？...但是博客属于内容为主的网站，不是应用，要说应用也勉强只能说博客的后台管理可以是应用。博客前台唯一的交互就是评论、搜索，因此SPA并不适合这样的工作。
Blazor 应用程序可以在服务器上作为 ASP.NET 应用程序的一部分运行，也可以部署为在用户计算机上的浏览器中运行（类似于单页应用程序）。...当应用程序需要数据或与其他服务交互时，可以使用标准 Web 技术与 HTTP 服务通信。...总结下：Blazor WebAssembly 是一种SPA(单页应用)框架，使用的是 WebAssembly 开放标准，无需安装任何插件或代码生成，完全在浏览器中运行。...F5开始运行，浏览器会显示一定时间（大概好几秒钟）的Loading，在Blazor WebAssembly首次访问时需要下载相比Blazor Server更多的文件到浏览器。...小结 本篇，我们了解了什么是WebAssembly以及什么是Blazor WebAssembly，然后通过创建第一个Blazor WebAssembly了解了如何快速创建一个SPA单页应用应用，了解了如何通过
; }); } 这样就使你的应用程序能够处理，程序目录下wwwroot目录的静态文件内容。...一旦max-age设置的时间过期，浏览器就不会再使用本地缓存，而去直接请求服务器端。这样已经避免了一些额外的请求到服务器端了。...如果我们在浏览器与服务器中间使用CDN缓存文件数据的话，这样就算客户端浏览器的缓存过期了，但是请求也不会到我们的服务器上，而是请求到CDN缓存服务器。 ...下面我们看看文件缓存在ASP.NET Core中是如何判断缓存失效的？.NET Core开源的代码为我们提供了了解它的入口【代码 Source Code】。...我们在使用CDN时，因为还要进行开发任务，一般我们都要有两套地址，一套是CDN上的文件地址，一套是本地调试开发用的地址。ASP.NET Core中也为我们提供了Tag Helper来解决这样的问题。
Blazor的核心技术基于WebAssembly，它允许在浏览器中运行编译后的本地代码，从而使得.NET运行时可以在浏览器中运行。...脚本由 ASP.NET Core 共享框架中的嵌入资源提供给客户端应用。 客户端应用负责根据需要保持和还原应用状态。...当Blazor WebAssembly应用被创建用于部署，而没有后端ASP.NET Core应用为其提供文件时，该应用被称为独立的Blazor WebAssembly应用。...无需 ASP.NET Core Web 服务器即可托管应用。 无服务器部署方案可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。...以上所有dll文件只会在第一次请求时下载，然后它们会被缓存在浏览器中。
网络上不同渲染方法的摘要 如您所见，摘要中包含了很多有用的信息。让我们快速浏览下每个： Full CSR 早先我们都知道一种方法，就是后端返回一个简单的HTML，在用户的浏览器中进行应用初始化。...为此，我们还使用了chrome-aws-lambda库，该库基本上是（Headless ）浏览器，可以通过编程方式在Lambda函数内部进行控制。...服务器渲染与激活-流程 在解释其全部工作原理之前，还记得我们提到服务器渲染与激活方法需要我们构建SPA的两个生产版本吗？一个提供给浏览器并在浏览器中执行，另一个真正在服务器上执行？...否则，Web服务器Lambda将由API网关调用，并且将直接从数据库中或通过现场生成SSR HTML来返回（如图所示，当SSR HTML不存在时，甚至不存在过期的HTML时，都会发生这种情况）。...在您定义的关键事件中，当你需要将SSR HTML标记为已过期且缓存无效时，可以使用它们。
这时我们可以将这些资源缓存起来，每次请求时都从缓存中读取，这样就提高了系统的稳定性； 提高可用性：当数据系统服务出现问题时，通过缓存可以继续向请求端提供数据服务，只不过这时的数据有可能是过时的； 减少通信量...通过这种操作可以有效的降低磁盘的访问量。 缓存状态 所谓缓存状态是应用系统在一个时间点上数据的状态，这些数据有可能是持久化到数据库中，也有可能是临时存储在内存中等等。...Asp.Net 中的依赖和过期策略包含如下两种： File Dependency ：文件依赖，当硬盘上的一个或多个文件更改时，强制移除缓存数据。...静态变量缓存 将数据存储器声明为静态变量，并且提供维护接口，由于是在内存中，这种方案可提供对缓存数据的直接、高速的访问，当没有替代方案解决键值对的存储且对速度要求很高时，可以使用静态变量。...Cookies Cookies 也可以存储缓存数据，可以很方便的存储到客户端浏览器中，并且支持过期策略，但是缺点也很明显。
下次访问时直接从Session/缓存中获取当前用户。...因为我们还需要额外的控制，比如过期时间，这个属性只是在身份验证阶段来判断是否过期，在我们（如Controller.Action中）使用用户标识的时候并不需要此字段，类似的额外字段根据不同的身份验证方式可能有很多...，因此定义了“用户票证”这个概念，它包含 用户标识 + 身份验证过程中需要的额外属性（如得到用户标识的时间、过期时间等） 身份验证处理器AuthenticationHandler 参考上面的用户名密码+...cookie身份验证流程我们发现有几个核心的处理步骤： 在登录时验证通过后将用户标识加密后存储到cookie，SignIn 当用户注销时，需要清楚代表用户标识的cookie，SignOut 在登录时从请求中获取用户标识...（比如在登录页对于的Action、在请求抵达时、在授权中间件中）， 每个调用时都可以指定使用哪种身份验证方案，如果不提供将使用默认方案来做对应的操作。
离线功能使得Web应用程序类似于本机应用程序，当断开网络连接时可以继续浏览未浏览完成的内 容，离线功能的另一个好处是可以永久缓存静态的内容，而没有缓存过期的限制，这样很大程度上加速了网页的加载速度。...在ASP.NET中，可以通过一种变通的方式来达到这一目的。 1）把清单文件保存为单独文件，可以加任何后缀名，假设保存为manifest.mf。...以上两个步骤就完成了离线应用程序的构建，当程序第一次加载时，会加载这个缓存清单，并且根据清单中文件列表缓存文件，当浏览器再次加载时就不会去 服务器中加载缓存过的文件，可以想象，如果我们把一些静态的网页添加为缓存文件...我们无法控制浏览器的缓存过程，但是离线应用提供了 一些接口，我们可以调用这些API来让浏览器更新缓存的内容，ApplicationCache.update() 是用来更新缓存的内容，ApplicationCache.swapCache...总结 以上就是介绍如何在ASP.NET中应用HTML5离线功能，在其它的平台中的设置也是类似的，不同点在于如何把缓存文件以text/cache- manifest格式发送到客户端。
-- 其他NuGet包 --> wwwroot 文件夹: 存放静态文件（如CSS、JavaScript、图像等），这些文件可以通过浏览器直接访问。...wwwroot 文件夹: 作用： 存放静态文件，这些文件可以通过浏览器直接访问。通常包含CSS、JavaScript、图像等资源。...访问方式： 在浏览器中，这些文件可以通过相对于站点根目录的路径进行访问。 Controllers 文件夹: 作用： 包含控制器类，控制器处理HTTP请求并负责返回相应的视图或数据。...四、配置文件 在ASP.NET Core中，配置文件是一种存储应用程序配置信息的方式，允许将应用程序配置从代码中分离出来，以便于修改和管理。...示例： dotnet user-secrets set "MyServiceApiKey" "actualValue" 在ASP.NET Core中，这些配置文件和配置源提供了灵活的配置管理机制，使得应用程序在不同环境下能够轻松切换配置
那么，如何在视图中设置分部内容呢？...重启应用，然后刷新页面，你能看到这样的页面： ? 如果不做特殊要求的话，定义在布局页中的分部块，视图必须实现。...静态资源引入 通常情况下，静态资源的引入与HTML引用js和css等资源是一致的，但是对于我们在编写系统时自己创建的脚本和样式表，asp.net core提供了不同的处理方式。...然后启动应用访问： http://localhost:5006/files/ 然后能在浏览器中看到这个文件被正确响应。...通过这几篇内容，让我们对asp.net core mvc有了一个基本的认知。下一篇，我们将重新创建一个项目，并结合之前的内容，以实战为背景，带领大家完成一个功能完备的web系统。
Angular SPA模板现在使用Angular 7，在第一次稳定释放之前，它将被Angular 8替换。 SPA-s的身份验证。Microsoft通过此预览为单页应用程序添加了现成的身份验证支持。...即使在不支持或不允许WebSocket的环境中，SignalR Java客户端现在也可以使用。 友情提示：在构建新的ASP.NET Core项目时，不要忘记选择最新版本。...让我们看看如何在控制器层编写示例代码。...经常对不经常变化的数据设置缓存。 不要试图提前获取不需要的数据，这会增加响应的负载，并导致应用程序的加载速度变慢。 优化自定义代码 除了业务逻辑和数据访问代码之外，应用程序中可能还有一些自定义代码。...CDN通常可以在多个位置上使用，并且文件是从本地服务器提供的。从本地服务器加载文件可以提高网站性能。 最后 今天，我们学习了如何提升ASP.NET Core 应用程序的性能。
缓存机制的主要目的是提高应用程序的性能。作为 ASP.NET 开发人员，你可能会意识到 ASP.NET Web 窗体以及 ASP.NET MVC 可以使用 Cache 对象缓存应用程序的数据。...在进一步阅读之前，你先创建一个基于 Web 应用程序项目模板的新的 ASP.NET Core 应用程序。 ? 然后按照下面提到的步骤逐一构建和测试由内存缓存提供的各种功能。 1....内存缓存需要在启动类 Startup 中启用一下 不同于 ASP.NET Web 窗体和 ASP.NET MVC，ASP.NET Core 没有内置的 Cache 对象，可以拿来在控制器里面直接使用。...这里，内存缓存时通过依赖注入来启用的，因此第一步就是在 Startup 类中注册内存缓存的服务。...构造器会通过 DI（依赖注入）接收到缓存参数，然后被存储在本地变量总，提供后续使用。 3.
通过之前的章节，你已经可以灵活控制容器了，那么在接下来的几篇文章中，我们来练习通过修改容器来创建一个个性化的镜像，然后发布到Dockerhub、阿里云、Azure云的容器仓库中。...修改一个容器 为了便于演示效果，我们会通过运行两个容器来做对比，分别是映射到端口3000和4000，在我们的控制台窗口中输入以下命令。...这些容器是由相同的图像创建的，其中包含一个相同的Razor视图，这就是用于为MVC应用程序的默认URL生成一个响应。确认应用程序在这两个容器通过打开浏览器选项卡并请求URLs来生成相同的响应。...为了防止发生缓存行为导致效果无效，可以采用禁止浏览器缓存或者为CSS文件引入Taghelper。...如果你想更改应用程序中的文件， 应该通过环境变量的形式来处理，这个在我们后面的内容中带着大家了解。
针对不同格式的静态文件请求的处理，ASP.NET Core为我们提供了三个中间件，它们将是本系列文章论述的重点。...不过在针对对它们展开介绍之前，我们照理通过一些简单的实例来体验一下如何在一个ASP.NET Core应用中发布静态文件。...ASP.NET Core控制台应用，它具有如下图所示的项目结构。...当我们在浏览器上请求这个地址时，该PDF文件的内容将会按照如下图所示的形式显示在浏览器上。 ?.../img/”目录下创建一个名为index.htm的默认页面，现在利用浏览器访问这个目录对应的URL（“http://localhost:5000/img/”），显示就时这个页面的内容。
过期设置： 设置过期时间，当过期时间到达时，服务器便销毁存储在Session里的对象。...使用OutputCacheAttribute属性将控制器操作渲染的操作结果保存到缓存过滤器。...class为part的部分从缓存中取值，其他部分动态变化。...2客户端缓存 浏览器缓存 浏览器将从服务器获取的资源保存到本地，然后当再次发起请求并且请求url与以往请求url之一相同时，浏览器会优先查看本地磁盘，加载本地缓存资源。...(30)); 验证缓存数据的有效性 通过服务端对http消息头进行设置，以便客户端可以验证数据有效性。
ASP.NET Core 应用程序，支持静态文件，如 HTML，图像，CSS 和 JavaScript 文件。...静态文件 默认情况下，Asp.Net Core 应用程序不会提供静态文件。 静态文件的默认目录是wwwroot，此目录必须位于项目文件夹的根目录中。 将图片复制并粘贴到 wwwroot 文件夹中。...提供 wwwroot 文件夹之外的静态文件 默认情况下，UseStaticFiles()中间件仅提供 wwwroot 文件夹中的静态文件。...如果您愿意，我们还可以在wwwroot文件夹之外提供静态文件。 提供默认文档 大多数 Web 程序都有一个默认文档，它是用户访问程序地址时显示的文档内容。...为了能够提供默认页面，我们必须在应用程序的请求处理管道中插入UseDefaultFiles()中间件。
ASP.NET MVC 4 beta中包含了一个实验项目，用作开发“单页面应用程序（single page applications）”。...该项目也称为ASP.NET SPA，其项目类型基于一组开源库以及WPF、Silverlight上流行的MVVM模式。...它是构建于jQuery和Knockout之上的数据访问和缓存库。在示例代码中，你会看到有一个与knockout兼容的视图模型被自动生成。它的内部是基于Upshot的函数，用作处理与服务层的通信。...与基于XAML的技术类似，Knockout提供了声明式的数据绑定，它在当数据和视图模型基于暴露属性更改事件的observables 时，可以完美的进行工作。...DataController是ASP.NET Web API中ApiController的子类，后者提供了客户端向服务器提交ChangeSetEntry的基本方法。
它是 ASP.NET 平台的核心部分。能被MVC或者其他类型的web应用使用。同时它也可以用作独立的web服务应用程序。...当您要通过HTTP创建面向资源的服务时选择WEB API，因为其可以使用完整的 HTTP的特性（如URI，请求/响应头，缓存，版本控制，各种内容格式）。...ASP.NET WEB API是新的框架和ASP.NET框架核心的一部分。...如何在ASP.NET MVC中调用 WEB API？ Ans....如何在ASP.NET WEB API2中定义特性路由? Ans.
1.创建客户端 这里我们按照官方教程来，使用ASP.NET Core空项目，用内置服务器来承载客户端静态文件。...Core提供构成我们的应用程序的静态HTML和JavaScript文件，静态文件中间件就是为此设计的。...Configure(IApplicationBuilder app) { app.UseDefaultFiles(); app.UseStaticFiles(); } 这个中间件现在将提供应用程序的...**~/wwwroot**文件夹中的静态文件。...\wwwroot\ 1.5 添加html和js文件 两个html文件和一个除上面的oidc-client之外的js文件组成我们JavaScript应用(SPA) index.html callback.html
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
