webpack 多页面最佳实践_前端WebAssembly最佳实践

纵观2020年，webpack，react，vue，angular等革命化的前端产品，逐渐趋于平稳，什么是新的增长点呢？

答案：WebAssembly。

为什么是WebAssembly？作为程序员，高端与初级程序员之间的差距，往往不是一个功能如何开发，1年与5年+的差距往往就是在应用的性能调优上，高下立判，WebAssembly的应用性能是远高于传统web性能的，仅仅这一点，足以让很多大神对这一技术趋之若路。

很多人还不明白什么是WebAssembly，概念大家可以百度，这里我用通俗的语言，简单概括下就是：

WebAssembly不仅仅是前端的新技术，而是一种让浏览器能运行不止js这一种语言的能力，发稿阶段，c#和typescript等已经有框架可以实现WebAssembly，分别是blazor和AssemblyScript，可自行百度玩法。

那这跟前端开发有什么关系，能靠学习这个实现涨工资吗？答案：能，但有限，因为这不会成为你的技术壁垒，反而是一些c#或者其他语言的开发工程师也能开发前端页面逻辑（js前端再次被深深嘲讽），并且利用其语言本身的生态，如计算库，生成库等开发出更牛b的业务。那又有同学会问，.net和java（jsp）以前不是也能开发web吗，有什么区别呢？答：jsp只是写入数据之类，点击事件等还是要使用js，然而blazor是能编写所有js能写的程序。

以上，只是现状，那对于前端开发者，难道只能被嘲讽吗。我想不是的，以下我会介绍下blazor的helloword，以及WebAssembly如何在前端进行最佳实践。

blazor初级教程（windows）：

1. 下载.NET Core SDK，逐个下一步默认安装。
2. 打开命令行，切换到你常用项目目录，随后会用命令行在这个文件家中创建一个项目
3. 逐步运行下面的代码，运行后无报错即成功

$ dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview3.20168.3
$ dotnet new blazorwasm -o blazorApp
$ cd blazorApp
$ dotnet run

以上几部做完，cmd中将出现

cmd的打印

谷歌浏览器打开：http://localhost:5000

demo成功的界面

项目结构：

blazor的项目结构

以上就是全部demo的呈现，可以看到成功看到界面其实还是比较简单的，我知道的大多数朋友没有遇到奇怪的坑，通过这个demo我们产生几个疑问。

确实看到了界面但是通过浏览器查看，好像没看出来与js写的有什么不同。

答：是的这个运行态是基于.net服务的，说白了，要运行得开个.net服务才能访问，并不是浏览器端应用的版本，浏览器端版本预计在2020年5月发布，敬请期待

这个数据绑定是怎么做的？

答：类似vue的双向绑定

双向绑定

路由是怎么设置的？

答：这个就是，你设置什么界面就访问什么

...其他有什么问题，欢迎评论。

我这现在有个问题，这个跟我们前端有什么关系，我已经学会了，能跟老板提涨工资的事了吗？

答：可能不行，还需暂时忍耐，因为这也只是一个独立的项目，是服务器版本的blazor，所有的业务逻辑也是独立开发，无法将此融入到我们现有的项目当中，后续2020年5月份的客户端版本，也许可以。

前端利用WebAssembly的最佳实践是什么？

前面说了那么多，让大家都大概明白了WebAssembly的现状，对于后面的最佳实践我认为是这样的，未来的web开发依然是js和三大框架为主导的开发模式，而一些渐进增强的页面或者模块，可以利用WebAssembly的框架进行独立开发，达到极高的性能，这样利用js现有的各类库和WebAssembly的性能，各司其职。然而最重要的，就是将后面逐渐出现的.net、java、go、python的各类WebAssembly实现库，无缝的引入文本webpack中，让他成为一个loader，在项目分别建立目录，独立区分.net编写的WebAssembly文件，java编写的，让他们都能够共同在react项目中打包，并且发布上线，这样一个复杂的项目对不同要求的模块进行不同语言特性的开发，真正的让web实现全面跨平台（flutter在登顶前也许就要挂了），对于如此的状态，也许2020年就能实现，5月份发布的客户端版blazor我们可以期待，同时，这个架构思路的实际项目也会第一时间实现，有兴趣关注此的同学，可以关注一下这个开源项目：

github地址：react_home