微前端重构之旅：从零到一的经验分享

前端

2024-02-13 17:48:24

微前端简介

微前端是一种架构风格，它允许我们将一个应用程序分解成更小的、独立的模块。这些模块可以由不同的团队开发和维护，并可以独立部署。这使得应用程序更容易扩展和维护。

为什么要使用微前端？

使用微前端可以带来许多好处，包括：

提高开发效率： 由于微前端模块可以独立开发和维护，这使得不同的团队可以同时在不同的模块上工作，从而提高开发效率。
提高可扩展性： 微前端模块可以独立部署，这使得应用程序更容易扩展。当需要添加新的功能时，只需开发和部署一个新的模块即可，而不需要对整个应用程序进行重新部署。
提高可维护性： 微前端模块可以独立维护，这使得应用程序更容易维护。当需要修复一个模块时，只需修复该模块即可，而不需要对整个应用程序进行重新部署。

微前端的实现技术

目前，有许多技术可以实现微前端，包括：

iframe： iframe是一种比较简单的实现微前端的技术，它通过在主应用中嵌入iframe来加载子应用。
Web Components： Web Components是一种新的web标准，它允许我们创建可重用的自定义元素。这些元素可以被用来构建微前端模块。
Single-SPA： Single-SPA是一个流行的微前端框架，它提供了丰富的功能来帮助我们开发和管理微前端应用程序。
qiankun： qiankun是一个新的微前端框架，它具有轻量级、易于使用等优点。

微前端重构移动端项目实践

接下来，我将分享如何使用umi + qiankun + gitsubmodule完成微前端重构移动端项目的经验。

1. 项目初始化

首先，我们需要初始化项目。我们可以使用umi脚手架来创建一个新的umi项目。

npx create-umi my-app

2. 安装qiankun

接下来，我们需要安装qiankun。

npm install qiankun --save

3. 创建子应用

接下来，我们需要创建子应用。我们可以使用umi脚手架来创建新的umi子应用。

cd my-app/sub-app
npx create-umi sub-app

4. 配置主应用

接下来，我们需要配置主应用。我们需要在主应用的package.json文件中添加如下配置：

{
  "qiankun": {
    "slave": [
      {
        "name": "sub-app",
        "entry": "//localhost:7101/",
        "activeRule": "/sub-app"
      }
    ]
  }
}

5. 配置子应用

接下来，我们需要配置子应用。我们需要在子应用的package.json文件中添加如下配置：

{
  "qiankun": {
    "master": {
      "apps": [
        {
          "name": "main-app",
          "entry": "//localhost:7100/"
        }
      ]
    }
  }
}