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

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

相关推荐
用户7884773163411 小时前
用 C# 把每周 6 小时的 PDF 录入干到 20 分钟:一份可复制的桌面 OCR 方案
c#
禁默12 小时前
机器人的手,为什么拿个杯子都这么难?一文看懂“灵巧操作“
人工智能·microsoft·机器人
csdn_aspnet12 小时前
C# .NetCore Swagger ISchemaFilter 处理枚举、特殊类型
c#·.netcore·swagger
滴滴答答哒13 小时前
C# 技巧:优雅实现对象的“局部更新”与“字段合并”
开发语言·c#
code_long17 小时前
.net core 连接打印机 使用zpl指令打印机,并且位图本地渲染zpl指令
c#·.netcore·位图·打印机·模板编辑·模板预览
csdn_aspnet20 小时前
C# .NetCore Swagger ISchemaFilter Long 转 String 防精度丢失
c#·.netcore·swagger
小鹿软件办公1 天前
微软公布更多 AI 功能加持的 Windows 11 全新“照片”应用
人工智能·microsoft
白雪讲堂1 天前
从流量到增长:庞文英《GEO实战:AI时代的增长密码》重磅上市,开启AI营销新纪元
microsoft
下页、再停留2 天前
【C#桌面客户端系列学习-11】将SQLite数据库打包到exe里
数据库·c#·visual studio