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%

关注不迷路~~💕

相关推荐
Marktowin6 小时前
Mybatis-Plus更新操作时的一个坑
java·后端
赵文宇6 小时前
CNCF Dragonfly 毕业啦!基于P2P的镜像和文件分发系统快速入门,在线体验
后端
程序员爱钓鱼7 小时前
Node.js 编程实战:即时聊天应用 —— WebSocket 实现实时通信
前端·后端·node.js
Libby博仙7 小时前
Spring Boot 条件化注解深度解析
java·spring boot·后端
源代码•宸8 小时前
Golang原理剖析(Map 源码梳理)
经验分享·后端·算法·leetcode·golang·map
小周在成长8 小时前
动态SQL与MyBatis动态SQL最佳实践
后端
瓦尔登湖懒羊羊8 小时前
TCP的自我介绍
后端
小周在成长8 小时前
MyBatis 动态SQL学习
后端
子非鱼9218 小时前
SpringBoot快速上手
java·spring boot·后端