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

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

相关推荐
rockey6272 小时前
C#脚本引擎之AScript与Z.Expressions.Eval对比
c#·.net·script·expression·动态脚本
外域速览2 小时前
2026世界动力电池大会今日宜宾启幕:固态电池从实验室走向量产,IEC 国际标准终结概念乱象
大数据·人工智能·microsoft
天下无敌笨笨熊5 小时前
C#Modbus串口开发心得
开发语言·c#
CSDN_RTKLIB5 小时前
const与readonly关键字
c#
leonkay6 小时前
C# 锁机制——【2】深入原理
开发语言·后端·spring·c#·个人开发
geovindu10 小时前
CSharp: Wordcloud
开发语言·后端·c#·.net·.netcore·词云
hongmai66688810 小时前
ESP32-WROVER-IE-N4R8:外接天线+8MB内存,专治信号焦虑
笔记·单片机·嵌入式硬件·microsoft·risc-v
geovindu11 小时前
CSharp: Command Pattern
开发语言·后端·c#·.net·.netcore·命令模式·行为模式
pnoker13 小时前
从工业软件到 AI 智能体:工业 AIoT 技术路线的系统梳理
java·人工智能·物联网·microsoft·开源·工业互联网
格林威14 小时前
C# 相机图像阴影校正:使用OpenCvSharp实现工业相机阴影平场校正功能
人工智能·数码相机·opencv·计算机视觉·c#·机器视觉·工业相机