微前端架构：微前端是当下比较热门的架构模式，关于微前端的基本理念，其解决的问题，实践微前端

哎你看

于 2024-05-09 10:34:37 发布

阅读量566

点赞数 16

文章标签：前端架构

本文链接：https://blog.csdn.net/weixin_37954941/article/details/138604069

版权

微前端的基本理念

微前端是一种将不同的前端应用组合到一个完整应用的架构模式。其目标是能够将一个大型的，单一的前端应用拆分成多个较小，容易管理的部分，然后将这些部分独立开发、独立部署，并在统一的页面进行展示。

微前端解决的问题

随着业务的发展，一个单一的前端应用可能会越来越复杂，代码库庞大，不同团队合作开发时产生各种问题。而微前端给出了解决方案：

项目解耦：每个微前端应用都独立运行，互不影响，从而降低了各个模块间的耦合度，提高了代码的可维护性。
团队协作：不同的团队可以负责不同的微前端应用，每个团队可以根据自己的业务需求选择最佳的技术栈。
独立发布：每一个微前端应用都可以独立进行部署，大大提高了发布的灵活性。

如何实践微前端

实践微前端主要涉及如何构建和整合微前端应用：

应用拆分：首先你需要将你的应用拆分成多个微应用，每个微应用都应该有自己的职责和业务范围。
应用整合：然后你需要选择一个微前端框架（如 single-spa、qiankun 等）或定制自己的微前端框架来负责微应用的加载、卸载、通信等任务。
独立部署：每个微前端应用都要独立进行构建和部署，可以借助持续集成/持续部署（CI/CD）工具自动化这个过程。

使用 JavaScript 框架

大多数微前端框架都是 JavaScript 框架，如 Angular, React, Vue.js 等。你可以根据项目需求和团队的技术背景选择合适的框架。

使用基座应用

基座应用 (也叫主应用) 是一个微前端系统中的核心应用，它负责启动、加载和卸载微应用。基座应用要保持相对的简单和稳定，并且要有良好的错误处理机制以确保整个系统的稳健。

使用路由分发

路由分发是微前端的核心技术之一。在用户访问不同的 URL 时，基座应用会根据路由配置加载和展示相应的微应用。

状态管理

在微前端架构中，每个微应用通常都有自己的状态管理，而对于全局的状态，比如用户信息等，需要通过全局的状态管理库或者使用微应用之间的通信机制进行同步。

安全性

微前端架构也需要考虑安全性，比如需要确保每个微应用都在沙箱环境里运行，防止微应用之间的干扰和恶意代码的执行。

性能优化

微前端的性能优化主要从几个方面进行：首先是把公共的库抽离出来，防止多次加载；其次是使用代码分割和懒加载技术，按需加载微应用；最后是使用预加载和预渲染技术，提高用户的 perceived performance.

假设你有一个主应用，并且你希望在主应用中加载两个微应用“app1”和“app2”。

主应用的index.html可以像下面这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main App</title>
</head>
<body>
    <nav>
        <a href="#">Main app</a>
        <a href="/app1">App 1</a>
        <a href="/app2">App 2</a>
    </nav>

    <div id="container"></div>
    
    <script src="https://unpkg.com/qiankun/dist/umd/qiankun.development.js"></script>
    <script src="./main.js"></script>
</body>
</html>

主应用的main.js可以像下面这样：

import { registerMicroApps, start } from 'qiankun';

// 微应用的信息
const apps = [
  {
    name: 'app1',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8082',
    container: '#container',
    activeRule: '/app2',
  },
];

// 注册微应用
registerMicroApps(apps);

// 启动 qiankun
start();

在这个示例中，我们通过registerMicroApps来注册微应用，其中每个应用由name、entry、container和activerule四部分构成。我们初始化后，使用start函数来启动微应用。