微前端qiankun在实际应用中的经验分享

前端

2024-02-04 16:07:05

微前端：使用 QiaNkun 构建复杂前端系统的指南

微前端是一种架构模式，它允许您将大型单体应用程序分解成更小的、独立的子应用。这使得团队可以更轻松地维护和更新应用程序，同时还提高了性能和可扩展性。

QiaNkun：流行的微前端解决方案

QiaNkun 是一个非常流行的微前端解决方案，它可以帮助您轻松地构建出多子应用的复杂前端系统。它提供了开箱即用的功能，例如子应用加载、卸载、通信和生命周期管理。

在实践中使用 QiaNkun

我在实际应用中积累了一些经验，总结了以下几点分享给大家：

1. 主应用基座配置

初始化应用

首先，我们需要初始化一个新的项目，并安装 QiaNkun 依赖包。

npm install qiankun --save

然后，我们需要创建一个新的文件，如 main.js，并引入 QiaNkun。

import Qiankun from 'qiankun';

const apps = [
  {
    name: 'app1', // 应用名称
    entry: 'http://localhost:3001', // 应用入口地址
    container: '#app1', // 应用容器
    activeRule: '/app1', // 应用激活规则
  },
];

Qiankun.createApp(apps).then(() => {
  console.log('qiankun start');
}).catch((err) => {
  console.error(err);
});

最后，我们需要启动主应用，并访问 http://localhost:8080 来查看效果。

注册子应用

接下来，我们需要注册子应用。我们可以通过 qiankun.registerMicroApps 方法来实现。

Qiankun.registerMicroApps([
  {
    name: 'app1', // 应用名称
    entry: 'http://localhost:3001', // 应用入口地址
    container: '#app1', // 应用容器
    activeRule: '/app1', // 应用激活规则
  },
]);

这样，子应用就可以被主应用加载和卸载了。

2. 子应用配置

初始化应用

子应用的配置与主应用类似。首先，我们需要初始化一个新的项目，并安装 QiaNkun 依赖包。

npm install qiankun --save

然后，我们需要创建一个新的文件，如 main.js，并引入 QiaNkun。

import Qiankun from 'qiankun';

Qiankun.start();

最后，我们需要启动子应用，并访问 http://localhost:3001 来查看效果。

注册子应用

子应用的注册与主应用类似。我们可以通过 qiankun.registerMicroApps 方法来实现。

Qiankun.registerMicroApps([
  {
    name: 'app1', // 应用名称
    entry: 'http://localhost:8080', // 应用入口地址
    container: '#app1', // 应用容器
    activeRule: '/app1', // 应用激活规则
  },
]);

这样，子应用就可以被主应用加载和卸载了。

3. 主子应用通信

主子应用通信是微前端应用中常见的问题之一。我们可以通过 qiankun.sendMessage 和 qiankun.onGlobalStateChange 方法来实现主子应用通信。

主应用向子应用发送消息

Qiankun.sendMessage('app1', {
  type: 'update-data',
  data: {
    name: '张三',
    age: 18,
  },
});

子应用向主应用发送消息

Qiankun.onGlobalStateChange((state, prevState) => {
  console.log(state, prevState);
});

4. 性能优化

微前端应用在性能方面可能会有一些问题。我们可以通过以下方法来优化性能：

避免不必要的重新渲染

微前端应用中，主应用和子应用都是独立运行的。如果我们不注意，很容易造成不必要的重新渲染。我们可以通过使用 qiankun.skipChange 方法来避免这种情况。

Qiankun.skipChange(() => {
  // 这里不会触发子应用的重新渲染
});

减少网络请求

微前端应用中，子应用的资源都是从远程加载的。如果我们不注意，很容易造成大量的网络请求。我们可以通过使用 qiankun.prefetch 方法来减少网络请求。

Qiankun.prefetch('app1', {
  url: 'http://localhost:3001/main.js',
});

5. nginx配置发布

将微前端应用部署到生产环境时，我们需要对 nginx 进行配置。我们可以通过以下方式来实现：

server {
  listen 80;
  server_name www.example.com;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }

  location /app1 {
    proxy_pass http://localhost:3001;
  }
}

这样，我们就可以通过访问 http://www.example.com 来访问主应用，通过访问 http://www.example.com/app1 来访问子应用了。

总结

微前端 QiaNkun 是一个非常流行的微前端解决方案。我在实际应用中积累了一些经验，总结了以上几点分享给大家。希望对大家有所帮助。

常见问题解答

1. 微前端有哪些优点？