.NET10 - 尝试一下Blazor Web Assembly Standalone App的fingerprint新特性

1. 简单介绍

对于Blazor Web App,微软在.NET9中使用MapStaticAssets来代替UseStaticFiles, 静态文件(如 HTML、CSS、图像和 JavaScript)存储在wwwroot文件夹中,这些文件会传输到客户端浏览器,通过MapStaticAssets提供的新特性,比如设置ETag或者Last-Modified等header,使得静态文件发生更改或浏览器缓存被清除时候,才会重新加载文件。Fingerprint也是.NET9引入的,防止重复使用旧版本的文件。同时MapStaticAssets也提供了文件压缩的特性,加快了文件加载的速度。

在.NET9中,为静态文件添加的新特性,比如ETag, Fingerprint,使得静态文件的加载性能提高很多,不过只适用于Blazor Web App。页面中要使用含有fingerprint的静态资源,一般是通过ComponentBase.Assets 来进行的,语法是@Assets\[\],通过这种写法可以解析特定Asset的fingerprint URL的。下面是一个例子,

复制代码
<link rel="stylesheet" href="@Assets["app.css"]" />

静态文件新特性,还包含 ImportMap 的使用。在App.razor中可以添加如下component,

复制代码
<ImportMap />

<ImportMap>组件的使用其实就是下面这行语句的功能

复制代码
<script type="importmap"></script>

静态文件新特性的具体信息也可以参考mslearn的文章 ASP.NET Core Blazor static files 。

在.NET10时候才增加了Blazor Web Assembly Standalone app fingerprint的功能,这个是对于javascript起作用的。这边将尝试在Blazor Web Assembly Standalone app中使用一下fingerprint功能。

2. 具体说明

2.1 创建项目

创建Blazor WebAssembly Standalone app类型的项目,如下图所示,

2.2 配置项目

  1. 在项目文件(后缀为.csproj)中, 添加如下配置,

    true

2)在index.html中添加importmap

复制代码
<script type="importmap"></script>
  1. 在wwwroot中添加一个javascript文件,同时添加一个blazor页面,如下图所示,
  1. 在index.html中,添加如下两行代码,
javascript 复制代码
<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
<script src="js/ShowAlert#[.{fingerprint}].js"></script>

在Blazor项目进行build/publish的时候,#.{fingerprint}会被替换成一个fingerprint字符串。

5)Blazor AlertUser.razor的内容,如下图所示,

2.3 运行一下

2.3.1 检测fingerprint

运行项目,同时按F12检测访问请求,

这是之前index.html中针对javascript导入的修改,

发现blazor.webassembly.js 和 ShowAlert.js的文件名后确实附加上了fingerprint,#.{fingerprint}被替换成一个fingerprint字符串。

2.3.2 测试JS功能

在Blazor页面AlertUser.razor中,使用了JSRuntime来调用js文件中的showAlert函数,发现能够正常工作,

3. 总结

本文简单记录了一下.NET10中Blazor WebAssembly Standalone app的fingerprint使用过程。有了fingerprint特性,就可以防止加载旧的静态文件了。2025年11月微软将会发布.NET10,这是LTS(Long Term Support)版本。当前.NET10已经处于Release Candidate 2的阶段,新特性还在更新中,后续还需跟着微软学习一下。

本文如果哪里有错误,麻烦告之,谢谢谢谢!

相关推荐
CSharp精选营5 小时前
我用 ASP.NET Core 做了个水稻病虫害检查系统
c#·毕业设计·.net core·码农刚子
唐青枫5 小时前
我用 C# 开发了一款电子发票自动整理工具
c#·.net
下页、再停留5 小时前
【C#桌面客户端系列学习-2】在原来窗口基础上打开新窗口
c#·visual studio
Behavior5 小时前
Unity 手游 iOS Deep Link 唤醒全流程:从 URL Scheme / Universal Links 到 C# 层参数投递
c#·unity3d·游戏开发
我是唐青枫5 小时前
我用 C# 开发了一款电子发票自动整理工具
c#·.net
WAKU6 小时前
C#: 爸爸再爱我一回! 写在微软使用Rust重写GitHub Copilot之后的碎碎念
microsoft·rust·微软·c#·编程语言
唐青枫6 小时前
别把 WPF 写成一个 MainWindow:C#.NET Prism 模块化开发详解
c#·.net
用户788477316346 小时前
WPF 数据绑定 5 个隐形坑:第 3 个 90% 的人都栽过
c#
小羊没烦恼!6 天前
微服务化的基石——持续集成
java·大数据·word·powerpoint·.net
可涵不会debug6 天前
LangChain 进阶之路:LangGraph 图工作流、有状态智能体完整入门教程
microsoft