一句话讲明白 WebAssembly、微前端等技术背后的核心

约定不等于承诺〃 2023-03-01 09:18 88阅读 0赞

# 一句话讲明白 WebAssembly、微前端等技术背后的核心 #

![format_png][]

WebAssembly 是在浏览器端可执行的字节码，主要解决的问题是性能。编辑器能把 C、C++、Go、TS 等语言编译成 WebAssembly 并能在浏览器中运行。

使用场景一般就是对性能有很高要求的应用，另外也可以把一些本来需要在后端完成的操作放到前端来做。比如视频解码、图片处理等等。

我们需要学他嘛？99.9% 的开发者都不需要去学习它，WebAssembly 更多的是让原本写 C++、Go 语言的这批人能在浏览器上干些原本做不到的事情。

![format_png 1][]

微前端借鉴了后端微服务的思想，核心就是把原本庞大的应用拆包，能够让这些单独的包独立打包部署运行，可以直接看成把一个应用拆成了一个个小的模块。

微前端适合庞大且老旧的工程，协作人员很多。举个例子，你有一个项目很老旧了，技术栈用的还是 JQuery 或者 React 很老的版本。当下你们需要使用 React 16 去开发新功能的话，这时候重写整个应用肯定是不现实的。那么此时你就可以通过微前端去解决问题，在不影响不修改旧功能的同时又能使用新的技术栈去写新功能。或者更极端一点，通过微前端你们团队可以在这个项目里各自使用三大框架而不影响他人。

如果你的项目小，协作的人也不多，没什么必要去做微前端，了解一下它解决的问题就行了。

![format_png 2][]

Serverless 也就是无服务架构，当然它不是真的不需要服务器了。服务器还是需要的，只是现在服务器不需要我管了，只需要提供代码逻辑就好了，它帮助开发者更聚焦在代码层面而不是工程层面。

Serverless 中目前最常见的分类应该就是云函数了（FaaS）。写完代码以及运行的条件然后往云上一丢就好了，什么部署啦、扩容啦、容灾啦等等你啥都不用管，只管调用函数就好了。

那么前端需要学习 Serverless 么？你觉得你学这个有啥用？

![format_png 3][]

脚手架的核心很简单，就是帮你运行了 `git clone xxx`，当然这是它最简单的一个实现。

在工程中使用的脚手架，一般都是为了帮助开发者根据选项快速生成模板，并集成了一套开发及部署中常用的套件。

你如果想自己搞个脚手架其实也很方便。核心就是搞出几套模板，比如说适用于 PC 端、手机端的，多页单页应用，JS 或者 TS 的。这样一分你就能搞出很多套模板了，然后集成下 Webpack 配置、npm script 等等。最后用上命令行的开发库，提供给用户几个选项，然后分别去这些模板的仓库里拉代码，over~

当然以上的做法不高级，更高级的做法还能动态修改模板，如果你想实现这样的脚手架，推荐直接看三大框架的脚手架了。

虽然前端技术栈看着很多很杂，看着高大上其实就那样，而且很多都没啥必要学，了解一下这些技术解决了什么问题，如何做的就够了。

## 最后 ##

觉得文章还行的读者可以点个赞，另外有任何问题也可以评论区交流。

[format_png]: /images/20230209/cc7341fa5047412eb7fa6aa18a1e06dc.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzEwLzE2ZjhkNGUyMjliZjJjMzg?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzEwLzE2ZjhkNTAyYjA5ZjlmOGE?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAyMC8xLzEwLzE2ZjhkNTA0Y2YyMWMzY2U?x-oss-process=image/format,png