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

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

相关推荐
Xin_ye100864 小时前
第三章:内存泄漏的常见“案发现场”
c#·wpf
吴可可1239 小时前
C#CAD点击计数器实现
c#
心平气和量大福大10 小时前
C#-WPF-UserControl-生命周期(加载 退出)
开发语言·c#·wpf
sunywz10 小时前
【c#】 Web Deploy一键发布,IIS部署全流程
开发语言·前端·c#
zandy101110 小时前
体验家 XMPlus 问卷答题体验优化与完成率提升引擎:从交互设计到行为心理学的工程化实践
windows·microsoft·交互
玖玥拾12 小时前
Unity 3D 笔记(十二)Unity/C# Socket 网络笔记1
网络·unity·c#
码银12 小时前
放弃了豆包,我使用Python做了一个桌面宠物
python·microsoft·宠物
C.咖.13 小时前
C++ 实战:从零手写控制台五子棋(深入解析内存管理与核心算法)
microsoft·五子棋·编程实践·c++ 项目实战·游戏开发教程
EIP低代码平台13 小时前
EIP低代码平台 - 系统日志
低代码·c#·权限·工作流·netcore
玖玥拾13 小时前
Unity 3D 笔记(十五)Unity/C# Socket 网络笔记4
服务器·网络·unity·c#