在前端，往往由一个前端团队创建并维护一个 Web 应用程序，使用 REST API 从后端服务获取数据。这种方式如果做得好的话，它能够提供优秀的用户体验。但主要的缺点是单页面应用（SPA）不能很好地扩展和部署。中后台应用由于其应用生命周期长 (动辄 3+ 年) ，由于参与的人员…

我们团队正在做一个XX系统，技术栈是React，目前该系统日渐庞大，开发及维护成本加大，且每次必须把整个项目一起打包，费时费力。经考虑后决定将其拆分成多个项目，由它们组合成一个完整系统，微前端架构是非常好的选择。 对我们来说最大的好处是单项目维护。 注意看地址栏变化，其中包含 …

我所在团队是做toB业务的，技术栈是Vue，团队目前有十多个典型的toB业务（菜单+内容布局），这些业务都是服务于一个大平台的，因为历史原因，每个业务都是独立的，都有一个html入口，所以当用户在这个大平台上使用这十多个业务的时候，每当切换系统时，页面都会刷新，体验很差；在开发…

此后台系统是为了搭配我的另一个项目 School-Partners学习伴侣微信小程序而开发的。是一个采用Taro多端框架开发的跨平台的小程序。感兴趣的可以看一下之前的文章 1. 登录界面 2. 题库管理 3. 修改题库 1. 使用Hook封装API访问工具 2. 实现懒加载通用…

是指将单页应用（SPA）在服务器端渲染成 HTML 片段，发送到浏览器，然后交由浏览器为其绑定状态与事件，成为完全可交互页面的过程。（PS：本文中的 SSR 内容都是围绕同构应用来讲的） 更快的首屏加载速度：无需等待 JavaScript 完成下载且执行才显示内容，更快速地看到…

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…

关注核心实现请直接跳至 第四小节：执行流程。 到此，项目就已经初始化完毕了，接下来开始核心的内容，微前端框架的编写。 微前端的核心为app，微前端的场景主要是：将应用拆分为多个app加载，或将多个不同的应用当成app组合在一起加载。 为了更好的约束app和行为，要求每个app必…

微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用从单一的单体应用转变为由多个小型前端应用聚合为一的应用。 iFrame。使用 iFrame 及自定义消息传递机制 此次实践，采用的是Single-SPA的加载机制，具体如下。 portal项目启动…

在 Web 开发导论/微前端与大前端一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。如康…