看这篇就够了！2021 大前端技术回顾及未来展望( 九 ) _前端

9、微前端，不可轻视的一环2016 年 ThoughtWorks 提出了微前端思想：将庞大的项目拆分成各个小型灵活项目，这些小项目互不干扰，可以独立开发、独立运行以及独立部署，由此拉开微前端帷幕。在 2019 年阿里在 single-spa 基础上开发了 qiankun 微前端框架后，微前端的热度一直在增加。在微前端的发展过程中，开发者们也慢慢摸索出当下微前端的应用场景：

文章插图

Image
时间来到 2021 年，微前端的框架已经非常多了，其中名声比较响亮的有老牌的 single-spa ， Github Star 数最高的微前端框架 qiankun ，以及新兴微前端框架京东的 MicroApp 。

文章插图

Image
single-spa 自 2020 年发布了 v5.0 后，在去年上半年主要工作还是围绕 v5.0 一些 Bug 的修复，而在下半年 7 月份发布了 v6.0 的 beta 版本。虽然 v6.0 也有一些 Breaking Changes ，但是对于这些 Changes ，大多数用户是不需要更新自己代码的。其中比较重要的是在浏览器方面， v6.0 将是最后一个支持 IE11 的版本，且在以后的版本 v7.0 + 将不再支持 IE11 ， single-spa 团队将会把更多精力从浏览器兼容转到维护整个 single-spa 生态上。v6.0 还加入两个新特性：

支持异步取消页面导航。
暴露 patchHistoryApi ，开发者可以使用 single-spa 封装后的 pushState/replaceState/popstate/hashchange 。

不仅老牌框架在发力，号称 “可能是你见过最完善的微前端解决方案” qiankun 也在不断更新。qiankun 主要还是解决不同应用场景的一些问题，以及修复沙箱中一些 JavaScript 的兼容问题，比如沙箱中的 defineProperty 问题，以及沙箱性能问题等。虽然 qiankun 在去年看起来没太多更新，但是它也给出了令人激动的 V3.0 RoadMap ，里面说到了非常多更新，主要更新有：独立应用加载模块以及独立沙箱模块。

文章插图

不过， qiankun 依然没有解决侵入性强的问题，并不能像类似 iframe 一样很方便地嵌入页面。
下半年一个好消息是，京东也推出了自己微前端的解决方案 MicroApp 。它并没有采用 single-spa 和 qiankun 的组件化思路，而是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom ，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。它有以下特性：

类 WebComponent + html Entry
生命周期
资源地址补全
JS 沙箱、样式隔离、元素隔离
数据通信
预加载
插件系统

MicroApp 在使用性和侵入性都做得非常完美，这个框架的发展和未来是非常值得期待的。
总的来说，微前端的基础来自于“所有大型系统都逃不过熵增定律” ，它能解决的问题也是解构一些巨石应用，所以微前端更多时候是 “悲观主义工程师” 在工程上的妥协。对于是否要使用微前端，可以看 qiankun 作者 kuitos 在这篇《你可能并不需要微前端》里的分析。
IMWeb 团队在过去的一年中也对微前端做了深度的调研，以 qiankun 为基础完成了一次非常成功的 qiankun x 增量重构的微前端实践，将老的 Vue 巨石项目和新的 React 项目有机融合在一起，实现了并行开发以及无缝重构，极大提升前端的生产力。具体实践细节可以关注 IMWeb 团队公众号后续的文章。

展望 2022 技术趋势业务可能会碰到瓶颈，但是技术的发展是永不止步的。只有 “厚积” 才能 “薄发” ，前端人必须时刻磨炼自己，突破自身界限，才能在这个规范化、工业化、智能化、大统一化的时代走的更远！
在细分领域方面，我们可以对 2022 年做一些展望：