微前端架构技术解析( 二 ) _微前端架构

· 定位微前端模块所在的host并拉取微前端模块manifest.json列表（在上文介绍的路由中已经完成）
· 由于获取manifest的过程在加载路由时已经完成，因此接下来直接从store中获取该模块的js文件url，并将其加载，再插入页面。此处直接通过往document.head中插入script标签的方法加载模块，这与加载路由文件的方法一样，不再赘述
· 执行微前端模块的渲染函数，最终将其渲染至页面中。每个微前端模块都定义有一个全局的渲染函数，比如window.mp.render_home(‘#containerId’)则会调用微前端模块中的Vue实例化、渲染函数，这一点会在后文详细讲述。这里要注意的是，需要传入一个DOM id以便Vue将渲染过的模块插入页面对应的位置。
- 通用模块注册为懒加载组件
在业务中经常会碰到一些通用的代码需要被引用，这些代码如果是两三行，引用相对简单，但如果是成百上千行或是一个通用的组件，每个微前端模块都通过import引用它，则会极大增加用户浏览器需要下载并解析的代码量，拖累页面性能。所以在容器应用中（或者容器应用引用的一个common组件中）需要将重复引用的代码注册为全局引用的方法。
需要注意的是，以往在Vue中注册全局组件往往需要在app.js中import，这会增加页面初始化app.js文件的大小，所以为避免这一问题，在注册组件时可以利用webpack的动态加载import的方式进行，这样一来则只有在组件需要的时候才会真正引入这个组件的代码，而不是直接将其打包进app.js中。在import时加入webpackChunkName的注释可以起到告诉webpack打包后chunk的文件名的作用。，比如下面引入echarts的方式：

文章插图

微前端模块完整的微前端模块可以代表一个单独的业务，其中可以包括一个或多个子模块，比如一个关于收入的微前端模块，其中包括收入概览、收入图表、收入按天列表等多个子模块，这就要求每个微前端模块都有如下功能：
1、一个遵循框架规范的业务自己定义的路由。这能给业务最大的自由度：上线新页面而无需部署容器应用；
2、每个需要独立出来的模块的entry文件。Webpack打包时会将每一个entry生成一个js文件以便单独调用，因为每个entry js代码都包含初始化框架的逻辑，所以理论上每个entry代码都可以独立运行；
3、因为每次部署后所有js代码的hash都会变化，所以微前端模块需要能够生成一个manifest文件列表，包括上面的路由文件以及全部独立的模块js文件的url列表。容器应用会实时通过这个manifest文件获取最新的js代码。
下面我们来详细介绍微前端模块的组成：
- webpack相关配置
微前端模块的webpack相比主容器，有下面几点不同：
· 忽略一些第三方包。尽管模块在package.json中也引用了Vue等第三方包，但在webpack打包时无法将其包括进来，这主要是以下两点原因：其一，这会导致js大小以几十几百倍增加；其二，Vue等框架代码完全可以使用主容器已经引用了的三方包。所以我们利用webpack的external配置忽略了一些不希望被打包过程包括的代码：

文章插图

· 多个entry 。因为一个微前端模块可能会包括很多个可单独引用的子模块，每一个子模块都单独有一个Vue初始化等功能的js文件（类似主容器的app.js）。在打包过程中，我们加入了扫描全部jobs文件夹下js文件的功能，每一个js文件都代表了一个微前端模块下的子模块。
· 部署路径：因为每一个微前端模块都需要与其他微前端模块部署到不同的服务器位置，所以在webpack打包部署时需要单独配置。开发环境下可以直接使用localhost加不同的端口port，线上环境可根据实际情况进行配置。
· manifest：我们通过webpack-manifest-plugin来在打包时自动生成一个列表文件。这样每次访问到微前端模块时都能通过这个文件获取到最新上线的js代码文件。
- 路由
一个微前端模块可能代表了一个业务，而每个业务可能会频繁变化路由配置，所以如果路由分配能由业务微前端模块自行配置，不同团队则能更方便的进行更改而不需要重新上线容器应用。上文已经介绍了主容器如何获取并使用微前端中的路由配置，这里详细介绍模块中如何配置自己的路由。
在jobs/routes.js中，我们绑定一个全局函数用来让主容器获取到我们自己配置的路由信息，类似下面的代码jobs/route.js：