最近几年都在做Web前端相关工作，虽然我把自己归于全栈工程师，但最近确实都在研究前端相关工作。还记得年轻时，经常写博客，但过了三十后，基本不怎么写了，想想，也该梳理下知识，一方面，进行知识积累，增加点成就感，另一方面，也给孩子做个学习榜样。
Web前端架构体系方面，打算写十篇左右的文章，因为相关文章很多很多，而我最推崇的是费曼学习法则，所以我尽量写出让大家都能轻松阅读的文章。
现在我们进入正题，淡淡Web前端架构。
首先说下，为什么要架构呢?
你想象下，你在建一幢高楼，结果没有图纸；在拼乐高星战飞船，没有说明；在拼拼图，没有背面标注，也没有原缩小图参考。这时候，怎么办？当然是凉拌。你的答案已经很明显了，结局只有两种，花更多的时间来做，或就根本做不出来。
架构设计的最重要目的是为了进行整体系统概览，以及开发方向指导。
而架构要包含的内容，简单说就是下面四个
1、系统间关系
2、系统内关系
3、应用内架构
4、系统规范与原则
而架构的原则主要是三个方面
1、架构的合适：架构就像衣服，不能太长，也不能太短
2、可扩展的：架构需要充分考虑扩展性
3、持续不断的：架构不是一次性物品，是一个跟着软件生命周期的长期过程
好吧，前面说了半天，都没到前端架构，现在我们来说下前端架构，在早期，前端基本上是没有架构的，对，都是堆HTML、CSS和JS，架构？没有的！我们都是梭哈代码的。
在这混沌的年代，一切都是那么的不美好。
有一天，Node.js出现了，于是，前端有了更好的包管理工具，有了模块管理的概念和应用，有了更好的构建工具，加上后来的前后端分离，组件化思路，Web前端就慢慢形成了自己的架构体系。
而随着Web系统的复杂化及模块化、组件化分解，我们可以把Web系统进行如下分层
1、系统级
2、应用级
3、模块级
4、代码级
每个层级对应不同的架构方向与功能
系统级的架构，我们一般考虑是对接外部系统需要考虑的场景，如你对接微信登录，对接外部SDK，或集成BFF，对API进行管理或梳理等。
应用级别，一般是对应于微服务，一个系统里面会有多个微服务，而对接这些微服务的操作，我们归于应用级别，当然，你有使用什么脚手架，有使用什么第三方库，也应该归于应用级别。
模块级，就是指你的组件化开发中的组件设计了，模块化，组件化后，对各模块及组件的功能梳理，以及对功能的实现
代码级，就比较好理解了，在代码层面，使用SOLID原则，进行代码编写，减少Bug。