.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的阶段,新特性还在更新中,后续还需跟着微软学习一下。

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

相关推荐
影寂ldy7 小时前
C# try-catch 异常处理全套笔记
服务器·数据库·c#
TeamDev9 小时前
JxBrowser 9.3.0 版本发布啦!
java·后端·c#·混合应用·jxbrowser·浏览器控件·异步媒体设备
zzgnbfd65889 小时前
2026最新vibe coding入门实战:零基础快速落地全流程实测
人工智能·microsoft
梦帮科技9 小时前
UE5 GAS 实战:用 Gameplay Ability System 搭建「赛博修真」境界与技能体系
c++·人工智能·python·ue5·c#
码来的小朋友10 小时前
手把手教你用 Python + PyQt5 做一个可视化图片切图工具
开发语言·python·microsoft
神经智研社11 小时前
ROS2-5章:节点参数parameter详细讲解
windows·microsoft·机器人环境搭建·win11 ros2 开发环境
wei19862111 小时前
.net添加web引用和添加服务引用有什么区别?
java·前端·.net
北域码匠13 小时前
RIPEMD-128哈希算法深度解析
c#·密码学·哈希算法·加密算法·消息摘要·ripemd-128·原生实现
pW3g3lLuu15 小时前
.NET 高级开发 | http 接口对接和客户端开发技巧
网络协议·http·.net
csdn_aspnet15 小时前
C# 截取或匹配字符串内包含指定字符
c#·字符串·正则·string·匹配·截取