什么是微服务？先看看维基百科的定义：
微服务（英语：Microservices）是一种软件架构风格，它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础，利用模块化的方式组合出复杂的大型应用程序，各功能区块使用与语言无关 (Language-Independent/Language agnostic）的API集相互通信。
换句话说，就是将一个大型、复杂的应用分解成几个服务，每个服务就像是一个组件，组合起来一起构建成整个应用。
想象一下，一个上百个功能、数十万行代码的应用维护起来是个什么场景？
- 牵一发而动全身，仅仅修改一处代码，就需要重新部署整个应用。经常有“修改一分钟，编译半小时”的情况发生。
- 代码模块错综复杂，互相依赖。更改一处地方的代码，往往会影响到应用的其他功能。
如果使用微服务来重构整个应用有什么好处？
一个应用分解成多个服务，每个服务独自服务内部的功能。例如原来的应用有 abcd 四个页面，现在分解成两个服务，第一个服务有 ab 两个页面，第二个服务有 cd 两个页面，组合在一起就和原来的应用一样。
当应用其中一个服务出故障时，其他服务仍可以正常访问。例如第一个服务出故障了， ab 页面将无法访问，但 cd 页面仍能正常访问。
好处：不同的服务独立运行，服务与服务之间解耦。我们可以把服务理解成组件，就像本小书第 3 章《前端组件化》中所说的一样。每个服务可以独自管理，修改一个服务不影响整体应用的运行，只影响该服务提供的功能。
另外在开发时也可以快速的添加、删除功能。例如电商网站，在不同的节假日时推出的活动页面，活动过后马上就可以删掉。
难点：不容易确认服务的边界。当一个应用功能太多时，往往多个功能点之间的关联会比较深。因而就很难确定这一个功能应该归属于哪个服务。
PS：微前端就是微服务在前端的应用，也就是前端微服务。
微服务实践
现在我们将使用微前端框架 qiankun 来构建一个微前端应用。之所以选用 qiankun 框架，是因为它有以下几个优点：
- 技术栈无关，任何技术栈的应用都能接入。
- 样式隔离，子应用之间的样式互不干扰。
- 子应用的 JavaScript 作用域互相隔离。
- 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
样式隔离
样式隔离的原理是：每次切换子应用时，都会加载该子应用对应的 css 文件。同时会把原先的子应用样式文件移除掉，这样就达到了样式隔离的效果。
我们可以自己模拟一下这个效果：
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <body> <div>移除样式文件后将不会变色</div> </body>
</html> /* index.css */ body { color: red; }
现在我们加一段 JavaScript 代码，在加载完样式文件后再将样式文件移除掉：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"> <body> <div>移除样式文件后将不会变色</div> <script> setTimeout(() => { const link = document.querySelector('link') link.parentNode.removeChild(link) }, 3000) </script> </body> </html>
这时再打开页面看一下，可以发现 3 秒后字体样式就没有了。
JavaScript 作用域隔离
主应用在切换子应用之前会记录当前的全局状态，然后在切出子应用之后恢复全局状态。假设当前的全局状态如下所示：
const global = { a: 1 }
在进入子应用之后，无论全局状态如何变化，将来切出子应用时都会恢复到原先的全局状态：
// global { a: 1 }
官方还提供了一张图来帮助我们理解这个机制：
好了，现在我们来创建一个微前端应用吧。这个微前端应用由三部分组成：
- main：主应用，使用 vue-cli 创建。
- vue：子应用，使用 vue-cli 创建。
- react: 子应用，使用的 react 16 版本。
对应的目录如下：
-main
-vue
-react
创建主应用
我们使用 vue-cli 创建主应用（然后执行 npm i qiankun 安装 qiankun 框架）：
vue create main
如果主应用只是起到一个基座的作用，即只用于切换子应用。那可以不需要安装 vue-router 和 vuex。
改造 App.vue 文件
主应用必须提供一个能够安装子应用的元素，所以我们需要将 App.vue 文件改造一下：
<template> <div class="mainapp"> <!-- 标题栏 --> <header class="mainapp-header"> <h1>QianKun</h1> </header> <div class="mainapp-main"> <!-- 侧边栏 --> <ul class="mainapp-sidemenu"> <li @click="push('/vue')">Vue</li> <li @click="push('/react')">React</li> </ul> <!-- 子应用 --> <main class="subapp-container"> <h4 v-if="loading" class="subapp-loading">Loading...</h4> <div id="subapp-viewport"></div> </main> </div> </div> </template> <script> export default { name: 'App', props: { loading: Boolean, }, methods: { push(subapp) { history.pushState(null, subapp, subapp) } } } </script>
可以看到我们用于安装子应用的元素为 #subapp-viewport，另外还有切换子应用的功能：
<!-- 侧边栏 --> <ul class="mainapp-sidemenu"> <li @click="push('/vue')">Vue</li> <li @click="push('/react')">React</li> </ul>
改造 main.js
根据 qiankun 文档说明，需要使用 registerMicroApps() 和 start() 方法注册子应用及启动主应用：
import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:7100', container: '#yourContainer', activeRule: '/yourActiveRule', }, { name: 'vue app', entry: { scripts: ['//localhost:7100/main.js'] }, container: '#yourContainer2', activeRule: '/yourActiveRule2', }, ]); start();
所以现在需要将 main.js 文件改造一下：
import Vue from 'vue' import App from './App' import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from 'qiankun' let app = null function render({ loading }) { if (!app) { app = new Vue({ el: '#app', data() { return { loading, } }, render(h) { return h(App, { props: { loading: this.loading } }) } }); } else { app.loading = loading } } /** * Step1 初始化应用（可选） */ render({ loading: true }) const loader = (loading) => render({ loading }) /** * Step2 注册子应用 */ registerMicroApps( [ { name: 'vue', // 子应用名称 entry: '//localhost:8001', // 子应用入口地址 container: '#subapp-viewport', loader, activeRule: '/vue', // 子应用触发路由 }, { name: 'react', entry: '//localhost:8002', container: '#subapp-viewport', loader, activeRule: '/react', }, ], // 子应用生命周期事件 { beforeLoad: [ app => { console.log('[LifeCycle] before load %c%s', 'color: green', app.name) }, ], beforeMount: [ app => { console.log('[LifeCycle] before mount %c%s', 'color: green', app.name) }, ], afterUnmount: [ app => { console.log('[LifeCycle] after unmount %c%s', 'color: green', app.name) }, ], }, ) // 定义全局状态，可以在主应用、子应用中使用 const { onGlobalStateChange, setGlobalState } = initGlobalState({ user: 'qiankun', }) // 监听全局状态变化 onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev)) // 设置全局状态 setGlobalState({ ignore: 'master', user: { name: 'master', }, }) /** * Step3 设置默认进入的子应用 */ setDefaultMountApp('/vue') /** * Step4 启动应用 */ start() runAfterFirstMounted(() => { console.log('[MainApp] first app mounted') })
这里有几个注意事项要注意一下：
- 子应用的名称
name必须和子应用下的package.json文件中的name一样。 - 每个子应用都有一个
loader()方法，这是为了应对用户直接从子应用路由进入页面的情况而设的。进入子页面时判断一下是否加载了主应用，没有则加载，有则跳过。 - 为了防止在切换子应用时显示空白页面，应该提供一个
loading配置。 - 设置子应用的入口地址时，直接填入子应用的访问地址。
更改访问端口
vue-cli 的默认访问端口一般为 8080，为了和子应用保持一致，需要将主应用端口改为 8000（子应用分别为 8001、8002）。创建 vue.config.js 文件，将访问端口改为 8000：
module.exports = { devServer: { port: 8000, } }
至此，主应用就已经改造完了。
