news 2026/4/15 17:18:16

Blazor WASM 程序打包器【都昌电子病历编辑器最新特性】

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Blazor WASM 程序打包器【都昌电子病历编辑器最新特性】

工具亮点

使用简单

本软件只有一个 BlazorWASMPackager.html 文件,BlazorWASMPackager-en.html 为其英文版本。将 HTML 文件直接放置在 Blazor WebAssembly 程序发布后的根目录下(一般为 wwwroot 目录),用主流浏览器打开即可使用,不依赖任何第三方软件。

核心特性

提供可视化进度反馈和详细处理日志

支持自定义输出文件名和脚本合并规则

突破跨域与本地运行限制

解决传统 Blazor WASM 应用的跨域资源调用问题(CORS),通过资源内嵌避免跨域请求

支持直接从本地文件系统启动应用(file:// 协议),无需依赖 Web 服务器

适用于离线场景或本地演示环境,无需配置服务器跨域策略

简化部署流程

将数十甚至上百个分散的资源文件合并为单个 JS 文件,减少部署文件数量

简化软件文件部署、网络缓存、版本升级和回滚等工作

降低多文件传输时的网络请求开销

减少网络防火墙或代理对多文件请求的限制风险

提升加载性能

对所有资源进行最大级别 GZIP 压缩,显著减小传输体积

减少 HTTP 请求次数,降低网络延迟影响

支持自定义脚本精简,移除冗余代码

增强部署灵活性

生成的单一文件可轻松集成到各种静态资源托管服务

支持微前端架构(MicroApp / QianKun)的环境适配

便于版本管理和缓存策略实施

我是如何开发这个软件的?

本工具借助于豆包 AI(https://www.doubao.com)开发完成。首先,笔者使用了以下提示词逐步创建 HTML 文件的主体:

生成一个HTML页面,包含JS代码,实现以下功能:

解析当前路径下的 _framework/blazor.boot.json 文件,解析其中的 resources/runtime|assembly|runtimeAssets|pdb 节点下的属性名

以这个属性名来当做文件名,然后下载这些文件,获得二进制内容,使用GZIP压缩,然后转换为base64字符串。base64字符串换行,每行128个字符

创建一个新字符串,采用JavaScript格式。然后定义 window.__DCFileContents = {"文件名":"base64字符串"}

界面上提供一个"下载"按钮,以js的minitype加载生成的js字符串

不要使用pako,直接使用浏览器内置的GZIP模块

这是一个blazor wasm的程序打包器,修改HTML的文字说明

base64字符串不能太长,128个字符就自动换行,而且输出文本时自动追加显示在最下面。每次生成前先清空调试输出文本的界面,然后调试输出文本开始追加显示

不要输出base64的内容预览,去掉当前的调试文本,只保留下方的调试文本追加方式输出

调试输出文本框宽度为100%,下方添加一个进度条。中间的status元素去掉

调试输出文本框有个初始化的固定宽度,进度条中间显示进度文本提示信息。添加版权信息"南京都昌信息科技有限公司版权所有"

修改 uint8ArrayToBase64(),在这里每32个字节进行一次转换,然后添加换行回车符,在这里面直接生成带换行的BASE64字符串,进度条文本左对齐

uint8ArrayToBase64() 里面,每组字节是129个,避免base64转换长度不匹配

不要使用json中间格式转换,直接拼接生成JS字符串

对于base64字符串输出采用 格式,避免 \n 转义字符,JS中直接输出换行的BASE64字符串

这里的字节长度都格式化输出,按照大小输出KB,MB单位。精确到小数点后2位。打包时把 blazor.boot.json也包含进去。GZIP采用最大压缩比率。总结报告中添加手动点击下载链接。处理完成后进度条重置。进度条颜色调整一下,蓝色背景黑字看不清楚

生成的JS文件名采用 blazor.boot.json 下面的 entryAssembly 数值加上 ".published.js" 后缀

不能跳过hash为空的文件,要无条件处理所有的文件

放一个多行文本框,让用户输入几个JS文件名,然后打包时,将_framework目录下这些JS文件读取出来,合并成一个Merge.js,并参与打包。如果用户未指定,则不生成Merge.js

boot.json里面列出的js是要强制打包的,不是合并到merge.js中。文本框中是让用户输入自定义脚本.js文件名。另外最终生成的js文件第一行要显示当前日期和时间

添加一个勾选框,让用户选择是否删除merge.js中的注释和无意义的空格

放一个单行文本框,用于输入自定义的最终JS文件名,如果为空则采用默认的文件名

简化调试输出文本,默认不精简merge.js空格和注释。要确保merge.js精简结果是正确的

JS中的字符串要考虑到 这种多行字符串,还有JS代码中会出现正则表达式,也不能破坏掉

通过 AI 创建了初步版本后,笔者手动进行了后续的修改和优化,最终形成了现在的版本。

代码执行过程

初始化阶段

页面加载准备

初始化 DOM 元素引用(进度条、日志区、按钮等交互组件)

重置进度条状态为"准备就绪"(0%)

清空日志输出区域

禁用下载按钮防止重复点击

用户参数收集

读取输出文件名输入框内容(为空时将使用默认命名规则)

解析自定义 JS 文件列表(每行一个路径,相对 _framework 目录)

检查"精简自定义脚本"复选框状态(决定是否移除注释和冗余空格)

核心处理流程

浏览器兼容性验证

检测当前浏览器是否支持 CompressionStream API(用于 GZIP 压缩)。不支持时终止流程并提示:"请使用最新版 Chrome、Edge 或 Firefox 浏览器"。

解析应用配置文件

下载配置文件:

发送请求获取 _framework/blazor.boot.json(Blazor 应用的核心配置)

记录配置文件原始大小并计入总统计

下载失败(如 404 错误)时终止流程,日志显示具体错误信息

解析配置内容:

解析 JSON 格式的配置数据

提取 resources 字段中所有资源路径(包括 runtime、assembly、jsModule 等类型)

提取 entryAssembly 值(用于生成默认输出文件名)

进度条更新至 10%,日志显示"配置文件解析完成"

处理核心资源文件

任务准备:

收集需处理的资源文件列表(包含 blazor.webassembly.js 等核心文件)

根据文件数量计算单个文件的进度占比(总进度 75% 平分)

逐个处理资源:

循环处理每个资源文件:

构造完整 URL:_framework/[文件名]

下载文件并转换为 Uint8Array 格式

记录原始文件大小(累加至总原始大小)

使用 gzipCompress() 函数进行最大级别(level:9)压缩

将压缩后的数据转换为 Base64 编码(按 129 字节分块处理)

生成包含文件名和 Base64 内容的条目

实时更新进度条(如"处理 3/20:dotnet.wasm")

单个文件处理失败时记录日志并跳过(不终止整体流程)

处理自定义 JS 文件(可选)

输入解析:

过滤空行和无效路径,获取有效自定义 JS 文件列表

列表为空时日志显示"未指定自定义 JS 文件,不生成 Merge.js"并跳过

合并与处理:

逐个下载指定的自定义 JS 文件:

记录每个文件原始大小

启用精简时使用 minifyJs() 处理(保留模板字符串和正则表达式)

合并内容(添加来源注释,除非启用精简)

对合并内容进行 GZIP 压缩并转换为 Base64 编码

生成 Merge.js 条目并添加到资源列表

生成输出文件

内容构建:

首行添加生成时间注释(格式:// Generated on: YYYY-MM-DD HH:MM:SS)

创建包含所有资源的 JavaScript 对象(键为文件名,值为 Base64 内容)

生成自执行函数,包含:

资源解压逻辑(使用 DecompressionStream 处理 GZIP 数据)

Blazor 启动配置(覆盖 loadBootResource 方法注入本地资源)

临时 URL 清理逻辑(释放内存占用)

文件名处理:

优先使用用户指定文件名(需包含 .js 扩展名)

未指定时使用规则:[entryAssembly].published.js

无 entryAssembly 时默认使用 blazor-resources.published.js

生成下载链接

统计信息计算:

原始总大小:所有资源+配置文件+自定义脚本的原始大小总和

生成文件大小:最终 JS 文件的 UTF-8 编码字节数

压缩比率:(生成文件大小 / 原始总大小) × 100%

创建下载:

将 JS 内容转换为 Blob 对象(MIME 类型:application/javascript)

生成临时下载 URL(URL.createObjectURL)

自动触发下载并显示总结报告(含大小统计和压缩比率)

提供手动下载链接(应对自动下载失败场景)

异常处理与优化

错误处理机制:

单个资源下载失败:记录日志并跳过(继续处理其他文件)

关键文件(如 blazor.boot.json)失败:终止流程并显示错误

页面卸载时清理临时资源链接(URL.revokeObjectURL)

性能优化细节:

大文件采用流式压缩,降低内存占用

Base64 编码分块处理,避免单行过长

针对 .NET 8/9 版本的 runtime 做适配处理

自定义 JS 精简保留关键语法结构(模板字符串、正则表达式)

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/13 0:24:11

AI如何自动解决Python包构建中的metadata错误

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容: 创建一个Python脚本,能够自动检测pyproject.toml文件中的常见metadata错误,如缺失的依赖项、版本号格式错误等,并提供修复建议。脚本应支持解析p…

作者头像 李华
网站建设 2026/4/11 0:30:23

PC 指针为何不等于执行地址?

一、先明确两个核心概念执行地址:CPU 当前正在"执行(Execute)"的指令地址(如正在运算的ADD指令地址)PC 指针:CPU 下一个要"取指(Fetch)"的指令地址(…

作者头像 李华
网站建设 2026/4/12 18:17:06

解读SAE/USCAR-2

🔬 SAE/USCAR-2 标准核心解读 1. 标准定位与范围 SAE/USCAR-2标准主要针对汽车电子连接器系统,规定了从开发、生产到现场分析全阶段的严格测试要求,以确保其电气和机械性能在车辆全生命周期内的可靠性。 主要适用对象:嵌入式、端…

作者头像 李华
网站建设 2026/4/13 8:31:16

我已经完全爱上沃玛了!

我已经完全爱上沃玛了!我已经完全爱上沃玛了!我已经完全爱上沃玛了!我已经完全爱上沃玛了!我已经完全爱上沃玛了!我已经完全爱上沃玛了!我已经完全爱上沃玛了!我已经完全爱上沃玛了!…

作者头像 李华
网站建设 2026/4/5 14:25:22

从微信红包延迟看超级应用高并发下的数据一致性攻坚

从微信红包延迟看超级应用高并发下的数据一致性攻坚 相信不少人都有过这样的经历:逢年过节在微信群发红包,明明点击了发送,却迟迟看不到红包出现在聊天界面;或者领取红包后,零钱余额没有即时更新,刷新好几…

作者头像 李华
网站建设 2026/4/11 4:27:28

Ink/Stitch 开源刺绣设计软件:免费教程与完整使用指南

Ink/Stitch 开源刺绣设计软件:免费教程与完整使用指南 【免费下载链接】inkstitch Ink/Stitch: an Inkscape extension for machine embroidery design 项目地址: https://gitcode.com/gh_mirrors/in/inkstitch 还在为昂贵的专业刺绣软件发愁吗?I…

作者头像 李华