超大体量项目,微前端落地方案,看完后悔来找我

标签: dev | 发表时间:2022-08-30 00:00 | 作者:
出处:https://itindex.net/relian

介绍

先介绍一下我们的项目背景,该项目是从18年开始启动的中间搁置了很久导致项目架构比较落后并且后期继续业务开发的时候也没有持续对架构进行优化迭代而是直接进行了业务开发,导致后面有很多的问题比如 启动慢代码耦合性强项目体量巨大导致开发效率降低之类的问题

问题描述

  1. 目前项目体量达到了 400个路由
  2. 打包完的包大小为 60MB左右
  3. 首次启动时间为 3分钟左右
  4. 热更新时间为 10s左右

过程

经过一段时间对项目架构的优化迭代,包括对路由架构的划分重构,解决了一部分在开发中的问题,但是对于项目体量巨大导致 耦合性强启动较慢的问题还是没办法从根本上解决,所以我们准备采用 微前端的方案来对项目进行具体的拆分,最后达到的一个目的解决代码之间 耦合性的问题、解决项目 开发效率的问题、划分清楚每个子应用可以支持 单独部署

计划

我们项目核心是从场景+管控+支付生成的每一条线,之后的计划是按照这三部分划分子应用,所以采用的大的框架方案就是这样

先定好目标和计划然后一步步向着这个方向慢慢搞

lQDPJxaA_CIoPGDNBCDNBDiwwqe6X4-bMxUC1GUVWYB_AA_1080_1056.jpg_720x720g.jpg

核心逻辑

场景

管控

支付

  1. 场景是一个子应用我们有比如酒店、火车等场景
  2. 管控是一个子应用他可以接收来自场景的参数渲染不同的管控页面
  3. 收银台是一个子应用提供场景支付能力

方案

我们采用的是当下比较成熟的方案 qinakun,这个在社区已经活跃很久了并且有一定的稳定性,开发接入文档和可能遇到的一些异常的问题社区都有很好的回答,接下来看看我们的具体操作

梳理当前需要拆分子应用涉及到的问题和依赖

  • 使用的组件依赖
  • 样式上的依赖
  • 适配方案的依赖
  • 路由的依赖划分
  • 去除当前应用之外的代码 --- 瘦身操作

创建一个新的架构用来承载子应用

  • 采用react-scripts重新cra配置快速构建
  • 搭建环境用到的依赖比如需要用到的 ts、less、vw/vh适配方案
  • 根据主项目用到的依赖去构建子应用的 package尽量不要改动太大防止子项目启动失败

之后根据qiankun文档的提示去改造主应用和子应用

  • 主应用改造一般是在入口文件
     
import { registerMicroApps, start } from 'qiankun'


registerMicroApps([
    {
        name: 'webapp-qkrechargecenter', //对应的子应用package的name
        entry: '//localhost:3000/', //子应用域名
        container: '#webapp-qkrechargecenter', //承载子应用的容器
        activeRule: (location)=>{
            return location.pathname.startsWith('/nav/normal') //渲染子应用的路由匹配
        },
        props: { //传递到子应用的组件或者参数等
            PrivatePayment,
            Test1
        }
    }
])

start()

复制代码
  • 在主应用中需要创建一个容器路由页面这个也就是我们的场景入口,这里面渲染的就是我们的子应用
     
import React, { useEffect } from 'react'
import { start } from 'qiankun'

const RechargeCenterPage: React.FC<any> = props => {
    useEffect(() => {
        return () =>{
            console.log('卸载')
        }
    }, [])
    return <div id="webapp-qkrechargecenter"></div>
}

export default RechargeCenterPage
 
复制代码
  • 子应用架构改造

这里只会有针对微前端之间的交互进行改造,其他的配置就看大家自己的一个具体方案了

  /**   
 * 重写 react-scripts 默认配置
 */
 
const appPackageJson = require('../package.json')

module.exports = (config, env) => {
  config.output.library = `${appPackageJson.name}-[name]`
  config.output.libraryTarget = 'umd'
  config.output.jsonpFunction = `webpackJsonp_${appPackageJson.name}`,
  
  return config;
};
复制代码
  • 子应用入口文件改造
     
import ReactDOM from "react-dom";
import * as React from "react";
import RouteComp from "./routes/routerList";


function render(props) {
  const { container } = props;
  ReactDOM.render(<RouteComp {...props}/>, container ? container.querySelector('#root') : document.querySelector('#root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log("react app bootstraped");
}

/**
 * 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  render(props);
}

/**
 * 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container
      ? props.container.querySelector("#root")
      : document.getElementById("root")
  );
}

/**
 * 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log("update props", props);
}


复制代码
  • 子应用路由改造

这里我是采用 react-router-config 直接渲染的路由如果大家有其他特殊配置可以自行配一下

  import React from 'react'   
import { renderRoutes } from 'react-router-config'
import { BrowserRouter as Router } from 'react-router-dom'
import rechange from 'app/index/index'
import paymentRechargePrivateView from 'app/paymentRechargePrivateView'


const NoFound = (props) => {
    return <div>
        NoFound
    </div>
}

const routerList = [
    {
        path: '/views/recharge/center',
        component: rechange,
        name: '充值中心',
        exact: true,
    },
    {
        path: '/views/paymentRechargePrivateView',
        component: paymentRechargePrivateView,
        name: "充值中心个人消费收银台",
        exact: true,
    },
    {
        component: NoFound,
    }
]

// 重点是basename需要匹配上主应用activeRule对应的路径
const RouteComp = (props) => <Router basename={window.__POWERED_BY_QIANKUN__ ? '/nav/normal' : '/'}>
    {renderRoutes(routerList, props)}
</Router>

export default RouteComp

复制代码

子应用配置跨域处理

  /**   
 * config-overrides.js
 * 重写 react-scripts 默认配置
 */
const configDev = require("./config/webpack.config.dev");
const configProd = require("./config/webpack.config.prod");

module.exports = {
  webpack: function override(config, env) {
    if (env == "development") {
      return configDev(config, env)
    } else {
      return configProd(config, env)
    }
  },
  devServer: (configFunction) => {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.open = false;
      config.hot = false;
      config.headers = {
        'Access-Control-Allow-Origin': '*', //设置允许跨域
      };
      return config;
    };
  },
};
复制代码

整体的思路都是按照这种方式去做拆分,中间遇到了很多的问题我们在下面分享一下,如果大家也有这种比较历史悠久的项目拆分那大概率也会遇到

实现目标过程中的遇到的比较 麻烦的问题

image.png

拆分完成的子应用内部路由跳转一直找不到路径或者一直向主应用路由去跳

  1. 出现问题的原因是我们之前老的路由name有一些自己的前缀规则
  2. 老的路由规则新的路由规则匹配的时候发生了异常,导致进行跳转的时候脱离了当前子应用的容器出现了跳转白屏

解决办法是针对子应用里面跳转的路径需要在主应用里面也配置一个对应的路由指向的是同一个容器页面,相当于重新加载了子应用容器这样不会在跳转的时候产生页面跳转错误导致白屏问题

     
//主应用
//引用同一个页面RechargeCenter
<Route path="/nav/normal/views/recharge/center" component={RechargeCenter} />
<Route path="/nav/normal/views/paymentRechargePrivateView" component={RechargeCenter} />

//子应用
const routerList = [
    {
        path: '/views/recharge/center', //该路径在主应用中注册
        component: rechange,
        name: '充值中心',
        exact: true,
    },
    {
        path: '/views/paymentRechargePrivateView', //该路径在主应用中注册
        component: paymentRechargePrivateView,
        name: "充值中心个人消费收银台",
        exact: true,
    },
    {
        component: NoFound,
    }
]
复制代码

子应用使用主应用传递下来的函数组件使用异常

异常图

注意是只有函数组件传递到子应用中使用才有异常提示,类组件是没有的,原因是当前使用的地方和传递下来的组件不是同一个实例,hooks组件需要在同一个实例下

  • 解决办法
  1.     借助`webpack`的`externals`,去使用同一份react,同时改造子应用和主应用
  //主应用   
externals:{
    'react':'React',
    'react-dom':'ReactDOM',
},
复制代码
  //子应用   
config.externals = {
    'react':'React',
    'react-dom':'ReactDOM',
}
复制代码
  1.     在主应用的入口文件引入react的cdn链接注意尽量和本地用的是同一个版本,防止兼容问题
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>   
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
复制代码

结束

以上是我们项目拆分的整体思路和具体落实方案第一季,后面肯定还会遇到更多的问题,所以不出意外还有第二季和第三季..... 谁家还有特别大的项目可以按照这种思路参考一下,按照业务线或者是比较独立的模块去单独拆子应用

如果大家有更好的方案可以在评论区讨论一下~

lQDPJxaA_BWj4-nNA1bNBGWwP4d5S3bIu2cC1GUUMcB_AA_1125_854.jpg_720x720g.jpg

关于本文

作者:零狐冲

https://juejin.cn/post/7121244973558661150


最后


欢迎关注「三分钟学前端」号内回复:
「网络」,自动获取三分钟学前端网络篇小书(90+页)「JS」,自动获取三分钟学前端 JS 篇小书(120+页)「算法」,自动获取 github 2.9k+ 的前端算法小书「面试」,自动获取 github 23.2k+ 的前端面试小书「简历」,自动获取程序员系列的  120 套模版 》》面试官也在看的前端面试资料《《
“在看和转发”就是最大的支持

相关 [大体 项目 前端] 推荐:

超大体量项目,微前端落地方案,看完后悔来找我

- - IT瘾-dev
先介绍一下我们的项目背景,该项目是从18年开始启动的中间搁置了很久导致项目架构比较落后并且后期继续业务开发的时候也没有持续对架构进行优化迭代而是直接进行了业务开发,导致后面有很多的问题比如 启动慢、 代码耦合性强、 项目体量巨大导致开发效率降低之类的问题. 目前项目体量达到了 400个路由.

直接拿来用!最火的前端开源项目

- - 酷勤网-挖经验 [expanded by feedex.net]
对于开发者而言,了解当下比较流行的开源项目很是必要. 利用这些项目,有时能够让你达到事半功倍的效果. 为此,本文整理GitHub上最火的前端开源项目列表,内容涵盖了. 如何成为优秀的前端开发工程师、. Web开发教学材等,这里按分类的方式列出前九个. 一、Architecture. 网站架构,一般认为是根据客户需求分析的结果,准确定位网站目标群体,设定网站整体架构,规划、设计网站栏目及其内容,制定网站开发流程及顺序,以最大限度地进行高效资源分配与管理的设计.

复杂 Web 前端项目的构建工具优化实践

- - IT瘾-tuicool
前言:本人于 2014 年底开始供职于百度贴吧(以下简称“贴吧”). 贴吧作为中国最大规模的 UGC 产品之一,在PC和移动端上承载了数亿用户的访问. 在过去十几年的运营中,贴吧积累了十分复杂的业务模式. 在 Web 前端,一度有超过40名工程师同时开发、提交和上线,为此,贴吧建设了非常复杂和完备的开发体系.

大型项目前端架构浅谈(8000字原创)

- - 掘金架构
update:2019.06.17更新2.4文章链接. 2.1、自建Gitlab. 2.3、自动编译发布Jenkins. 3.2、以应用为单位划分前端项目. 3.3、基础组件库的建设. 3.8、登录系统设计(单点登录). 3.11、多端共用一套接口. 我在2年之前,写过一篇中小型项目的前端架构浅谈.

论微前端在react项目中的应用 - 简书

- -
本篇文章的大部分内容将用于解释如何通过 js 在运行时集成多个微应用. 在这个例子中使用的是 React,你也可以使用其他的框架来实现. 我们先从开始,它的 package.json 内容如下. "react-app-rewired": "^2.1.1" }, "config-overrides-path": "node_modules/react-app-rewire-micro-frontends" } 复制代码.

推荐20个开源的不错前端低代码项目

- - SegmentFault 最新的文章
近几年,在技术领域低代码是比较热门的话题,比如阿里云推出了易搭,通过简单的拖拽、配置,即可完成业务应用的搭建,腾讯云则是推出了微搭,通过行业化模板、拖放式组件和可视化配置快速构建多端应用. 低代码是基于可视化和模型驱动理念,结合云原生与多端体验技术,它能够在多数业务场景下实现大幅度的提效降本,为专业开发者提供了一种全新的高生产力开发范式.

从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

- - SegmentFault 最新的文章
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目. 选择现成的项目模板还是自己搭建项目骨架. 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架. 选择一个现成项目模板是搭建一个项目最快的方式,模板已经把基本的骨架都搭建好了,你只需要向里面填充具体的业务代码,就可以通过内置的工具与命令构建代码、部署到服务器等.

reCAPTCHA项目

- - 四火的唠叨
文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》. 要说reCAPTCHA,就要先说一说CAPTCHA,全称是Completely Automated Public Turing test to tell Computers and Humans Apart,即全自动区分计算机和人类的图灵测试,也就是通常说的“验证码”,目的就是要把计算机和人区分开来.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长,但随着Web技术的逐渐深入,今后将会在以下几方面发力. JavaScript的兄弟们.

项目集成项目管理之项目范围管理

- - CSDN博客系统运维推荐文章
7.1项目范围和项目范围管理.    项目范围:为完成具有规定特征和功能的产品、服务或结果,而必须完成的项目工作. 7.1.2项目范围管理的作用.    确定在项目内包括什么工作和不包括什么工作;由此界定的项目范围在项目的全生命周期内可能因某种原因而变化,项目范围管理也对这种变化进行管理. 7.1.3项目范围管理的主要过程.