初步认识微前端

华铧
114 阅读6分钟

一、引言

微前端是一种前端的架构模式，将庞大的前端应用系统拆分成一个个更小，更可维护的管理部分。从而允许多个团队独立开发，测试和部署不同的功能模块，最终可以将模块组合成一个统一的应用程序。

微前端的核心思想在于分治。旨在解决大型单体前端应用在开发和维护过程中遇到的挑战。随着Web应用变得越来越复杂,微前端为团队提供了一种更灵活、更可扩展的开发方式。

二、微前端优势

介绍了微前端的定义和背景，我们具体来看看微前端所带来的优势。

  1. **降低复杂性：**将大型应用拆分成较小的、独立的部分,使得每个部分更易于理解和管理。
  2. **技术栈灵活：**好的微前端架构是与框架无关的，这也意味着不同的子应用可以灵活的使用不同的技术栈，提高灵活度。
  3. 独立部署: 每个微前端可以独立开发、测试和部署,加快了交付速度并降低了风险。
  4. 团队自治: 不同的团队可以独立工作,减少了沟通开销并提高了效率。
  5. 更好的可维护性: 由于每个模块相对较小且独立,因此更容易维护和更新。

三、微前端实现方法

如果我们从微前端的定义去看，本质上我们只需要在一个页面去控制不同应用的展示就好了。

如果基于这个理解，我们可以通过多种方式来实现微前端。

3.1 基于 iframe 的实现

工作原理：

  • 每个微前端应用被加载到独立的iframe中。
  • 主应用负责管理这些iframe,包括创建、销毁和通信。

代码示例：

<body>
  <h1>主应用</h1>
  <iframe src="<http://app1.example.com>"></iframe>
  <iframe src="<http://app2.example.com>"></iframe>
</body>

优点：

  • 简单易实现
  • 提供了很好的应用隔离
  • 可以集成完全不同技术栈的应用

缺点：

  • 性能较差,特别是在需要加载多个iframe时
  • 用户体验不佳,可能会影响页面的响应性
  • 跨 iframe 通信较为复杂

3.2 基于 Web Components 的实现

工作原理:

  • 使用Web Components标准创建自定义元素
  • 每个微前端应用被封装为一个自定义元素

代码示例:

class MicroApp extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<h2>Micro App 1</h2>';
  }
}
customElements.define('micro-app-1', MicroApp);

<body>
  <h1>主应用</h1>
  <micro-app-1></micro-app-1>
</body>

优点:

  • 基于Web标准,有良好的浏览器兼容性
  • 提供了很好的封装性
  • 可以与任何框架或库一起使用

缺点:

  • 学习曲线可能较陡峭
  • 某些高级特性的浏览器支持可能不完全
  • 没有沙箱，需要自己去处理隔离

3.3 JavaScript 运行时集成

工作原理:

  • 每个微前端应用被打包为一个JavaScript模块
  • 主应用在运行时动态加载这些模块

代码示例：

// 主应用
function loadMicroApp(name, url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => {
      resolve(window[name]);
    };
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

loadMicroApp('app1', '<http://app1.example.com/bundle.js>')
  .then(app => app.mount(document.getElementById('app1-container')));

优点:

  • 灵活性高,可以实现复杂的集成逻辑
  • 性能较好,可以实现按需加载
  • 可以共享公共依赖,减少重复加载

缺点:

  • 需要谨慎管理全局状态和依赖
  • 可能存在命名冲突和版本兼容性问题
  • 没有沙箱，需要自己去处理隔离

四、微前端框架对比

在微前端的实现中,有几个流行的框架值得我们关注。以下是对Single-spa、Qiankun、Garfish和IceStack这四个框架的详细比较:

4.1 Single-spa

简介: Single-spa是一个用于前端微服务化的JavaScript框架,它允许在同一个页面中共存多个不同的JavaScript框架。

特点:

  • 框架无关,支持混合使用不同的前端框架
  • 提供生命周期钩子,便于管理应用
  • 社区活跃,生态系统丰富

优势:

  • 灵活性高,可以逐步从现有项目迁移
  • 不限制技术栈,适合异构系统
  • 良好的社区支持和文档

劣势:

  • 学习曲线相对陡峭
  • 配置较为复杂
  • 样式隔离需要额外处理

适用场景:

  • 大型、复杂的应用系统
  • 需要整合多个不同技术栈的项目
  • 需要高度定制化的微前端解决方案

4.2 Qiankun

简介: Qiankun是蚂蚁金服开发的一个基于Single-spa的微前端实现库。

特点:

  • 基于Single-spa,但提供了更多开箱即用的特性
  • 提供了沙箱机制,确保应用之间的隔离
  • 支持应用间的样式隔离

优势:

  • 配置简单,易于上手
  • 提供了完善的沙箱隔离机制
  • 对 React 和 Vue 等主流框架有良好支持

劣势:

  • 与 Single-spa 相比,灵活性稍差
  • 在非 React/Vue 项目中可能需要额外配置
  • 性能开销相对较大,特别是在应用数量较多时

适用场景:

  • 主要基于 React 或 Vue 的项目
  • 需要快速实现微前端架构的团队
  • 对应用隔离有较高要求的项目

4.3 Garfish

简介: Garfish是字节跳动开源的一个微前端框架,旨在降低实施微前端的成本。

特点:

  • 提供了简单的API,易于集成
  • 支持多种加载方式(JS沙箱、WebComponent等)
  • 内置性能优化,如预加载和缓存机制

优势:

  • 轻量级,性能优秀
  • 灵活的加载策略
  • 良好的错误隔离和监控

劣势:

  • 相比其他框架,社区和生态系统相对较小
  • 文档和示例相对较少
  • 某些高级功能可能需要额外配置

适用场景:

  • 对性能要求较高的项目
  • 需要细粒度控制子应用加载的场景
  • 喜欢轻量级解决方案的团队

4.4 IceStack

简介: IceStack(原名 icestark)是阿里巴巴开源的面向大型系统的微前端解决方案。

特点:

  • 提供了多种集成方式,包括基座模式和独立应用模式
  • 支持 Config 和 Vite 插件,简化配置
  • 内置路由级别的代码分割

优势:

  • 对大型系统的支持良好
  • 配置灵活,支持多种集成场景
  • 与阿里系其他工具(如 ICE) 集成良好

劣势:

  • 学习曲线可能较陡
  • 对非阿里系技术栈的支持可能不如其他框架
  • 社区相对较小

适用场景:

  • 大型、复杂的企业级应用
  • 使用阿里系技术栈的项目
  • 需要细粒度控制和优化的场景

五、手写微前端

“纸上得来总觉浅，绝知此事要躬行”，说不如做。

我们可以自己手动实现一个微前端框架。

但由于篇幅有限，我们另外写一篇。

同时，由于笔者之前对于 Garfish 的使用比较多，

所以，下一篇会借鉴 Garfish 的思路去从 0 到 1 实现。

六、总结

本文我们主要初步了解了微前端的定义，优势，实现方式，以及市面的常用框架。希望读者对于微前端有个初步的了解和认识。

avatar
文章
阅读
粉丝