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：

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 压缩。

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

文件	原始	压缩	约简
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）时，资产将作为生成的一部分进行优化。 优化对于可具有较低带宽或不可靠的连接的移动环境尤其有利。

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

• ASP.NET Core 中的静态文件
• ASP.NET Core Blazor 静态文件

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

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

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

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

IIS gzip	MapStaticAssets	MapStaticAssets 减少
≅ 90	37.5	59%

关注不迷路~~💕