• home > webfront > engineer > Architecture >

    微前端学习笔记

    Author:zhoulujun Date:

    目前较成熟的微前方案有 qiankun、micro-app、EMP 方案,但是它们与MF有着本质的不同,那就是对“微前端”的定义:方案微的定义微前端的

    微前端是什么:

    微前端是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。

    Web 应用开发速度快、用完即走等特性,导致的一个最终结果就是「能用 Web 技术实现的应用,最终都会通过 Web 来实现」。在近几年涌现了一大批之前只能在传统 PC 软件中才能看到的优秀产品,例如:Photoshop、Web Office、Web IDE。尽管随着 Web 标准的演进,前端工程化也在不断演变,从模块化到组件化在到现在的工程化,但在面对跨团队大规模开发、跨团队企业级应用协作,现有的分治设计模式仍然显得有心无力

    比如复杂的系统,由于整个系统涉及范围较广,在实际的研发过程中必然会以功能或业务需求垂直的切分成更小的子系统,切分成各种小系统后尽管由于分治的设计理念提升了开发者体验,但是一定程度上降低了用户体验。那能否以一种新的架构模式,既保开发者体验,又能提升用户体验呢。

    微前端主要是用于解决:应用增量升级、多技术体系并存、构建大规模企业级 Web 应用而诞生的

    目前微前端主要是采用应用分而治之 + 动态加载 + SPA 应用的模式来解决大规模应用带来的一系列问题。

    微前端的整体架构

    微前端架构示例 微前端项目加载

    微前端部署平台





    目前较成熟的微前方案有 qiankun、micro-app、EMP 方案,但是它们与MF有着本质的不同,那就是对“微前端”的定义:

    方案微的定义微前端的定义
    Module Federation模块由多个互相独立的模块聚合而成的应用
    qiankun/icestark等应用由多个互相独立的应用聚合而成的应用

    定义上的不同决定了技术实现的不同:

    方案技术实现
    Module Federation模块本质上是JS代码片段,这种代码片段一般称为chunk。因此,模块的聚合,实际上是chunk的聚合。
    qiankun/icestark等应用本质上是HTML,而在SPA中,HTML又是main.js进行填充的。因此,应用的聚合,实际上是main.js的聚合。

    技术实现的不同又决定了使用场景的不同:


    方案使用场景
    Module Federation是一种技术升级的创造性工作,有一定成本,目的是为了让系统具备更强大的能力。
    qiankun/icestark等是一种维持现状的保守性工作,成本极小,目的是为了让系统拥有更长久的生命力。

    MF的实现其实并没有魔法,仅仅是异步chunk罢了。即便在MF中,不管是共享模块还是远端模块,其实还是使用的require.ensure去加载一些异步chunk罢了。只不过稍有不同的是,因为牵扯到依赖共享的逻辑,会有一个shared-scope的概念,用来实现依赖共享的相关逻辑。


    这整个过程跟webpack5是没有绑定关系的,也就是说MF并非webpack5的专属功能,Rollup和webpack4都可以实现MF。更多的推荐查看:


    转载本站文章《微前端学习笔记》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/engineer/Architecture/9029.html