微前端架构：使用不同框架构建可扩展的大型应用

概述

在现代Web开发中，随着业务复杂度的不断提高，单一的巨型应用逐渐难以满足高效开发和维护的需求。微前端架构作为一种解决方案，允许将一个大型应用拆分成多个独立的小型应用，这些小型应用可以单独开发、部署，并且能够灵活地集成在一起形成一个完整的系统。这种模式提高了开发效率，降低了维护成本，并且可以支持多种前端框架共存。

微前端架构的优点

可扩展性：每个微前端都可以独立开发、部署，易于扩展。
灵活性：可以根据业务需求选择最合适的前端框架和技术栈。
隔离性：各个微前端之间相互隔离，降低了互相影响的风险。
可维护性：每个微前端都是一个小的、可管理的模块，更容易维护。

微前端架构的实现方式

qiankun

qiankun 是一个轻量级的微前端解决方案，它基于单页应用 (SPA) 的理念，使用代理的方式实现了子应用的加载和卸载。

示例：使用qiankun实现多框架微前端

假设我们有一个主应用（使用React），以及两个子应用（一个使用Vue，另一个使用Angular）。

1. 主应用（使用React）

安装依赖

bash

深色版本

1npm install react react-dom @umijs/qiankun

创建主应用

jsx

深色版本

1// src/index.js
2import React from 'react';
3import ReactDOM from 'react-dom';
4import { registerMicroApps, start } from 'qiankun';
5
6const container = document.getElementById('root');
7
8ReactDOM.render(
9  <div>
10    <h1>主应用 - React</h1>
11    <div id="sub-vue"></div>
12    <div id="sub-angular"></div>
13  </div>,
14  container
15);
16
17registerMicroApps([
18  {
19    name: 'sub-vue',
20    entry: '//localhost:8081',
21    container: '#sub-vue',
22    activeRule: '/sub-vue',
23  },
24  {
25    name: 'sub-angular',
26    entry: '//localhost:4200',
27    container: '#sub-angular',
28    activeRule: '/sub-angular',
29  },
30]);
31
32start();

2. Vue 子应用

安装依赖

bash

深色版本

1npm install vue

创建Vue子应用

vue

深色版本

1// src/main.js
2import Vue from 'vue';
3import App from './App.vue';
4
5new Vue({
6  render: h => h(App),
7}).$mount('#app');
8
9if (module.hot) {
10  module.hot.accept();
11}

html

深色版本

1<!-- public/index.html -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Vue Sub Application</title>
8</head>
9<body>
10  <div id="app"></div>
11  <script src="/dist/runtime.js"></script>
12  <script src="/dist/polyfills.js"></script>
13  <script src="/dist/vendor.js"></script>
14  <script src="/dist/main.js"></script>
15</body>
16</html>

vue

深色版本

1<!-- src/App.vue -->
2<template>
3  <div>
4    <h1>子应用 - Vue</h1>
5  </div>
6</template>
7
8<script>
9export default {
10  name: 'App',
11};
12</script>

3. Angular 子应用

安装依赖

bash

深色版本

1ng new angular-sub-app
2cd angular-sub-app
3ng build --prod

修改Angular子应用

typescript

深色版本

1// src/app/app.component.ts
2import { Component } from '@angular/core';
3
4@Component({
5  selector: 'app-root',
6  template: `
7    <div>
8      <h1>子应用 - Angular</h1>
9    </div>
10  `,
11})
12export class AppComponent {}