一起学Blazor WebAssembly 开发（1）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近blazor的WebAssembly 正式版出来了，正好手头有一个项目采用的前后端分离模式做的，后端用的abp vnext（.net core 的一个很著名的框架）框架开发的，其实前端之前考虑的使用vue来做，但是看到了blazor的相关技术文章。就仔细看了下这个技术，也算是刚开始接触学习，这里呢就边学习边开发，把开发过程给大家分享出来。

blazor分为 Server 和 WebAssembly 版，先给看一下官方的说明，然后我再结合项目具体说下，两个版本官方的说明如下：

1、WebAssembly

Blazor WebAssembly 是单页应用框架，用于使用 .NET 生成交互式客户端 Web 应用。 Blazor WebAssembly 使用开放的 Web 标准（没有插件或代码置换），适用于包括移动浏览器在内的各种新式 Web 浏览器。通过 WebAssembly（缩写为 wasm），可在 Web 浏览器内运行 .NET 代码。 WebAssembly 是针对快速下载和最大执行速度优化的压缩字节码格式。 WebAssembly 是开放的 Web 标准，支持用于无插件的 Web 浏览器。WebAssembly 代码可通过 JavaScript（称为 JavaScript 互操作性或 JavaScript 互操作）访问浏览器的完整功能。通过浏览器中的 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行，沙盒提供的保护可防御客户端计算机上的恶意操作。

当 Blazor WebAssembly 应用生成并在浏览器中运行时：

* C# 代码文件和 Razor 文件将被编译为 .NET 程序集。

* 该程序集合 .NET 运行时将被下载到浏览器。

* Blazor WebAssembly 启动 .NET 运行时，并配置运行时，以为应用加载程序集。 Blazor WebAssembly 运行时使用 JavaScript 互操作来处理 DOM 操作和浏览器 API 调用。

已发布应用的大小（其有效负载大小）是应用可用性的关键性能因素。大型应用需要相对较长的时间才能下载到浏览器，这会损害用户体验。 Blazor WebAssembly 优化有效负载大小，以缩短下载时间：

* 在中间语言 (IL) 链接器发布应用时，会从应用删除未使用的代码。

* 压缩 HTTP 响应。

* .NET 运行时和程序集缓存在浏览器中。

2、Server

Blazor 将组件呈现逻辑从 UI 更新的应用方式中分离出来。 Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。可通过 SignalR 连接处理 UI 更新。运行时处理从浏览器向服务器发送 UI 事件，并在运行组件后，将服务器发送的 UI 更新重新应用到浏览器。Blazor Server用于与浏览器通信的连接还用于处理 JavaScript 互操作调用。