使用NetCore 3和Blazor在WebAssembly上进行网站开发

我认为WebAssembly是Internet的未来。 目前，该技术已集成在PC和移动设备上的大多数现代浏览器（或更确切地说，它们的引擎）中。 在Chrome，Edge，Firefox和WebKit等浏览器上。

在本文中，我将描述如何开始在Visual Studio中开发WebAssembly网站。 本文适合那些只了解asp.net mvc，c＃，html和css布局，而又不希望使用JavaScript就能开始开发SPA应用程序的人。

在本文发布时，NetCore 3框架处于RC1阶段，并且Blazor具有版本3.0.0-preview9.19457.4。 NetCore 3计划于2019年9月发布。至于Blazor，其承诺于2019年11月晚些时候发布，最有可能在NetCore 3.1发布之后发布。

• 我安装
• II从模板创建WebAssembly项目
• 三，决定结构
• IV启动和调试WebAssembly blazor
• V文件大小和链接器
• VI Publishing和LazyLoading元素库
• 七，结论

我安装（请务必在2019年11月之后发布最新版本）

1. Visual Studio预览-visualstudio.microsoft.com/en/vs/preview
2. Blazor模板-devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-release-candidate-1

II从模板创建WebAssembly项目

1. 打开VS预览16.3预览4
   
   
2. 创建一个新项目。 选择Blazor应用程序模板，然后指定WebAssembly的类型。
   
   
   图片创建过程

   
   
   
   
   
   
   
   

三，决定结构

• 这是一个包含html，css文件，图片等的客户端项目。 客户端（前端）将加载的所有内容。 客户端项目还包含用于创建WebAssemly包的代码。
• 此项目中的服务器包含客户端为获取信息（后端）而访问的服务代码。 该示例实现了天气信息。
• 共享用于存储前两个项目的通用数据模型。
  
  

IV启动和调试WebAssembly blazor

1. 设置两个断点。 客户端应用程序代码中的一个，服务的服务器代码中的第二个。 您可以立即注意到onclick按钮事件调用C＃代码，而不是JavaScript。 服务的服务器代码没有什么异常。
   
   
2. 在调试构建模式下运行解决方案。 成功组装后，将打开浏览器，并加载基于webassembly的网站
   
   
3. 让我们尝试转到“获取数据”部分。 本部分包含向后端发出请求的代码。 一旦我们尝试转到本节，服务控制器中的预定义断点将立即起作用。 行为是标准的，没有新内容。 继续执行代码
   
   
4. 现在，我们转到“计数器”部分。 这是在客户端上完全执行的实现代码。 通过单击“单击我”按钮，我们得到了意外的结果。 该代码将起作用（加到当前计数1），但是该代码中设置的断点将不起作用。
   
   
5. 事实是，基于Web程序集调试客户端应用程序在浏览器中进行。 就像JavaScript调试一样。 为此，请在运行站点的窗口中按shift + alt +D。 但是有几个条件。
   浏览器必须与正在运行的Visual Studio直接连接。 为此，Chrome必须在调试模式下运行，并且可以通过特定端口访问浏览器api。
   复制建议的行以启动浏览器。 关闭所有浏览器窗口。 并执行先前复制的行。
   
   
6. 重新启动调试。 如果您尝试多次调试在chrome中打开的客户端应用程序，则会收到错误消息。 该站点仅保留一个打开的选项卡，而仅保留一个调试选项卡。
   
   
7. 在调试选项卡上的文件结构中，您将看到磁盘上的文件。 源代码所在的位置。 现在，转到文件“ Counter.razor”，我们可以在onclick事件上调用的过程中设置断点。 当您单击“单击我”按钮时，将可以使用断点，我们将可以访问调用堆栈并查看变量的值
   
   

V文件大小和链接器

1. 正如我们在示例中看到的，下载的站点数据的大小很小，只有2.4MB（在客户端上解压缩后为5.4MB）。 首次加载网站时，将加载使网站正常工作所需的DLL（例如，如何加载JS库），之后不重新加载它们，而是从浏览器缓存中使用它们。
   
   
2. 您还应该注意使用链接器的事实。 这使您可以减小生成的dll文件的大小，即，从文件中自动切出未使用的代码功能。
   
   例如，从288KB的System.Text.Json.dll变为114KB，从146KB的System.Memory.dll变为58.5KB。 这是通过链接器的工作以及通过压缩传输的文件来确保的。
   
   另外，可以手动配置此过程docs.microsoft.com/ru-ru/aspnet/core/host-and-deploy/blazor/configure-linker?view=aspnetcore-3.0
   
   

VI Publishing和LazyLoading元素库

1. 通过IIS或ASP.NET Core引擎发布基于Webassembly的站点。 更多细节在这里 。
2. 尽管WebAssembly技术本身允许您按照developers.google.com/web/updates/2018/04/loading-wasm的要求下载wasm文件。
   当前，blazor无法根据特定页面的需求加载dll（wasm组件）。 也就是说，所有组件将在您首次访问该站点时下载。
   
   建议是“不要使用复杂的库来实现用三行代码编写的简单函数”。 为了简单地执行日志记录（不愿自己编写5行代码），请勿在客户端应用程序中继承100 + MB dll。
   
   好消息是他们承诺在核心3.1中实现模块化加载
3. 如果您想使用现成的组件来实施站点，那么Telerik，devexpress等知名公司的收藏或例如www.matblazor.com的免费软件包就已经可以买到了。

七，结论

• 目前，Weassambly技术已经可以在网站开发中充分使用。
• 为了舒适地与blazor一起用于Internet项目，需要LazyLoading。 在不久的将来会增加哪些承诺
• 如果该项目是Intranet，则将欢迎在新开发项目中使用blazor。 就此而言，不值得讨论内部网络上的终端PC的访问速度较慢，这可以使用瘦RDP客户端解决。
• ASP.NET Core 3 + blazor是C＃开发人员应该开发的地方
• 我相信，这项技术将来会导致javascript完全被淘汰，但这是我个人的看法。