ASP.NET Core 9.0 静态资产传递优化 (MapStaticAssets )

一、结论

💢先看结论吧, MapStaticAssets 在大多数情况下可以替换 UseStaticFiles,它已针对为应用在生成和发布时了解的资产提供服务进行了优化。 如果应用服务来自其他位置(如磁盘或嵌入资源)的资产,则应使用 UseStaticFiles

MapStaticAssets 是ASP.NET Core中的一个新功能,用于优化应用中的静态资产传递。该功能通过使用静态资产清单( manifest )来管理静态文件,从而减少不必要的网络请求,提高应用性能。

🪄功能和用法

MapStaticAssets 的主要功能包括:

‌优化静态资产传递‌:通过使用静态资产清单, MapStaticAssets 可以确保浏览器只请求必要的文件,减少带宽使用和加载时间。

‌支持多种UI架构‌:该功能可以与 Blazor 、 Razor Pages 和 MVC 等UI架构配合使用,提供一致的性能优化。

二、求证

MapStaticAssets 可优化 ASP.NET Core 应用中静态资产的交付。

1. 如果没有 压缩 缓存 指纹 等优化措施:

  • 浏览器必须在 每个页面加载 时发出其他请求。
  • 通过网络传输的字节数 超过所需 的字节数。
  • 有时会将文件的 过时版本 提供给客户端。

2. 创建高性能 Web 应用需要优化到浏览器的资产传送,可能的优化包括

  • 在文件发生更改或浏览器清除其缓存之前,提供一次给定资产。 设置 ETag 标头。
  • 更新应用后,阻止浏览器使用旧资产或过时资产。 设置上次修改的标头。
  • 设置正确的缓存标头
  • 使用缓存中间件
  • 尽可能提供资产的压缩 版本。
  • 使用 CDN 为离用户更近的资产提供服务。
  • 最大程度地减少提供给浏览器的资产大小, 此优化不包括缩小。

🎯 MapStaticAssets 是一项新功能,用于优化应用中静态资产的交付。 它旨在处理所有 UI 框架,包括 Blazor、Razor、Pages 和 MVC。 它通常是一个下降的替代方法 UseStaticFiles

cs 复制代码
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();

+app.MapStaticAssets();
-app.UseStaticFiles();
app.MapRazorPages();

app.Run();

MapStaticAssets 的运作方式是结合生成和发布时过程来收集应用中所有静态资源的信息。 然后,运行时库会利用此信息有效地向浏览器提供这些文件。

但是, MapStaticAssets 在大多数情况下可以替换 UseStaticFiles,它已针对为应用在生成和发布时了解的资产提供服务进行了优化。 如果应用服务来自其他位置(如磁盘或嵌入资源)的资产,则应使用 UseStaticFiles

MapStaticAssets 提供了以下 UseStaticFiles 没有的好处:

  • 为应用中的所有资产生成时间压缩:
    • 在开发期间 gzip,在发布期间 gzip + brotli。
    • 所有资产都经过压缩,目标是将资产大小降到最低。
  • 基于内容的 ETags:每个资源的 Etags 都是内容的 SHA-256 哈希的 Base64 编码字符串。 这可确保浏览器仅在文件内容发生更改时重新下载文件。

🆚下表显示了默认的 Razor Pages 模板中 CSS 和 JS 文件的原始大小和压缩大小:

文件 原始 压缩 % 缩减
bootstrap.min.css 163 17.5 89.26%
jquery.js 89.6 28 68.75%
bootstrap.min.js 78.5 20 74.52%
总计 331.1 65.5 80.20%

🆚下表显示了使用 Fluent UI Blazor 组件库的原始大小和压缩大小:

文件 原始 压缩 % 缩减
fluent.js 384 73 80.99%
fluent.css 94 11 88.30%
总计 478 84 82.43%

总共 478 KB 未压缩到 84 KB 压缩。

🆚下表显示了使用 MudBlazorBlazor 组件库的原始大小和压缩大小:

文件 原始 压缩 约简
MudBlazor.min.css 541 37.5 93.07%
MudBlazor.min.js 47.4 9.2 80.59%
总计 588.4 46.7 92.07%

使用 MapStaticAssets 时自动进行优化。 添加或更新库(例如使用新的 JavaScript 或 CSS)时,资产将作为生成的一部分进行优化。 优化对于可具有较低带宽或不可靠的连接的移动环境尤其有利。

有关新的文件传递功能的详细信息,请参阅以下资源:

在服务器上启用动态压缩与使用 MapStaticAssets

在服务器上,与动态压缩相比, MapStaticAssets 具有以下优势:

  • 更简单,因为没有特定于服务器的配置。
  • 性能更高,因为资产在生成时被压缩。
  • 允许开发人员在生成过程中花费额外的时间,以确保资产的大小达到最小。

🆚请查看下表,它将 MudBlazor 压缩与 IIS 动态压缩和 MapStaticAssets 进行了比较:

IIS gzip MapStaticAssets MapStaticAssets 减少
≅ 90 37.5 59%

关注不迷路~~💕

相关推荐
该用户已不存在1 小时前
8个Docker的最佳替代方案,重塑你的开发工作流
前端·后端·docker
lizhongxuan1 小时前
groupcache 工作原理
后端
栗然1 小时前
Spring Boot 项目中使用 MyBatis 的 @SelectProvider 注解并解决 SQL 注入的问题
java·后端
倔强的石头_2 小时前
【C++指南】类和对象(九):内部类
后端
lovebugs2 小时前
Java中的OutOfMemoryError:初学者的诊断与解决指南
jvm·后端·面试
00后程序员2 小时前
iOS端网页调试 debug proxy策略:项目中的工具协同实践
后端
yeyong3 小时前
用springboot开发一个snmp采集程序,并最终生成拓扑图(三)
后端
倚栏听风雨3 小时前
IDEA 插件开发 plugin.xml 中 <depends config-file=".xml" optional="true"> 详解
后端
惜鸟4 小时前
Spring Boot项目自己封装一个分页查询工具
spring boot·后端