爱奇艺号微前端架构实践

从子模块生成的manifest.json（后面微前端模块部分会介绍）中获取子模块的路由js文件并将其解析，再加入主路由中。经过此番操作后，同一个窗口再次访问这个地址时就会直接匹配成功主路由了。

-  微前端模块渲染

容器应用中最重要的部分就是如何获取并渲染微前端模块。现提供一个module.vue模块专门负责拉取并渲染微前端模块，则module.vue需要做的事情如下：

· 定位微前端模块所在的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：

可见，子模块的路由完全遵循Vue的路由规范（或遵循自身使用的框架的规范），这样可以让容器应用毫不费力地直接添加引用。容器应用加载完成js文件后，可以直接调用window.mp.home_routes()获来取已定义好的ROUTES配置。

-  子模块的entry文件（jobs/*.js）

每一个子模块都需要一个单独的entry文件，这类似于主容器的jobs/app.js，能用于初始化子模块代码、绑定全局渲染函数等。entry文件与正常的初始化Vue方式一样，只是需要将初始化逻辑包裹在一个全局函数中，以便主容器能在加载此模块js完毕后，方便的进行渲染调用。例如：

根据以上代码，渲染出来的Vue模块会被放到指定的#${containerId}中，这个ID由主容器在渲染时动态传入，以便将模块插入到指定的页面位置。

-  子模块代码开发

子模块代码开发与正常的Vue开发并无不同，可以轻松迁移老代码，只需要注意一些通用代码的引用并通过上文提到的懒加载模式引入。

后记

爱奇艺号技术团队基于Vue定制开发了微前端框架，通过应用上面介绍的基本方法及其他的自定义逻辑，我们搭建了与业务代码开发、代码迭代非常契合的一套微前端框架。我们认为微前端的主要好处有：

· 更小，更紧密且更易维护的代码库。

· 组织更具扩展能力，团队可更加独立自治。
未来，我们会继续完善前端框架，使其性能更加优秀，进一步提升爱奇艺号前端代码的开发效率，实现不同应用之间页面级别的自由组合，从而可生成个性化控制台。

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

s://bbs.csdn.net/topics/618166371)**

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？