微前端根应用

前端

2024-01-19 05:55:00

单体应用演变为微前端的必然之路

随着项目规模的不断扩大，单体应用的弊端日益凸显。耦合度高、维护困难、部署缓慢等问题成为掣肘项目发展的绊脚石。微前端作为一种新的架构模式，应运而生，为解决这些难题提供了全新的思路。

微前端的优势

微前端将单体应用拆分为多个独立的模块，每个模块都可以单独开发、部署和维护。这种解耦合的方式带来了以下优势：

独立开发： 各个模块可以由不同的团队并行开发，提升开发效率。
灵活部署： 模块的独立部署避免了整个应用的频繁更新，缩短了部署时间。
故障隔离： 一个模块出现故障不会影响其他模块的正常运行，增强了应用的稳定性。
代码复用： 模块之间可以共享代码和组件，减少重复开发的工作量。

单步单步搭建微前端根配置

1. 安装 single-spa

npm install --save single-spa

2. 配置根应用

在根应用中创建 index.html 文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="single-spa.js"></script>
    <script>
      singleSpa.start();
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3. 编写子应用

在子应用目录中创建 index.html 文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <script src="single-spa.js"></script>
    <script>
      singleSpa.registerApplication({
        name: 'subapp',
        app: function () {
          return System.import('subapp/main.js');
        },
        activeWhen: ['/subapp']
      });
      singleSpa.start();
    </script>
  </head>
  <body>
    <div id="subapp"></div>
  </body>
</html>

在 main.js 中定义子应用的挂载点和组件：

export const mount = element => {
  const container = document.createElement('div');
  container.innerHTML = '<h1>子应用</h1>';
  element.appendChild(container);
};
export const unmount = element => {
  element.innerHTML = '';
};