Qiankun framework

Qiankun — это микро-фронтенд фреймворк, построенный на основе single-spa, который позволяет объединять несколько независимых фронтенд-приложений в одно целое. Основная цель Qiankun — облегчить масштабирование крупных проектов и позволить отдельным командам работать автономно над различными модулями. В контексте Vue.js Qiankun предоставляет простой способ интеграции Vue-приложений в архитектуру микро-фронтендов.

Установка и настройка

Для работы с Qiankun необходимо установить основной пакет:

npm install qiankun --save

Кроме того, потребуется базовая настройка Vue CLI для каждого микроприложения, чтобы оно корректно экспортировалось и могло работать в контейнере.

Пример структуры проекта:

root-project/
│
├─ main-app/         # Контейнерное приложение
├─ vue-app1/         # Микроприложение 1
└─ vue-app2/         # Микроприложение 2

Каждое микроприложение Vue должно экспортировать life cycle hooks для Qiankun: bootstrap, mount, unmount.

// vue-app1/src/main.js
import { createApp } from 'vue';
import App from './App.vue';

let app = null;

function render() {
  app = createApp(App);
  app.mount('#app');
}

export async function bootstrap() {
  console.log('vue-app1 bootstrap');
}

export async function mount() {
  console.log('vue-app1 mount');
  render();
}

export async function unmount() {
  console.log('vue-app1 unmount');
  app.unmount();
}

Настройка контейнерного приложения

Контейнерное приложение управляет всеми микроприложениями. Для регистрации и запуска микроприложений используется функция registerMicroApps:

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vue-app1',
    entry: '//localhost:7100',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'vue-app2',
    entry: '//localhost:7200',
    container: '#container',
    activeRule: '/app2',
  },
]);

start();

Ключевые моменты:

  • entry — URL микроприложения. Qiankun автоматически загружает его скрипты и стили.
  • container — DOM-элемент в контейнерном приложении, куда будет монтироваться микроприложение.
  • activeRule — правило маршрутизации, при котором приложение активируется.

Работа с Vue Router и Vuex

Qiankun требует отдельной настройки роутинга и состояния для микроприложений:

  1. Vue Router: для предотвращения конфликтов маршрутов, у каждого микроприложения должен быть собственный экземпляр роутера.
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

export const router = createRouter({
  history: createWebHistory('/app1/'),
  routes: [
    { path: '/', component: Home },
  ],
});
  1. Vuex: состояние каждого микроприложения изолировано, но возможна интеграция через глобальный store контейнера при необходимости. Для синхронизации состояния используется механизм событий:
// В контейнере
const globalState = {
  user: null
};

function setGlobalState(state) {
  Object.assign(globalState, state);
  window.dispatchEvent(new CustomEvent('globalStateChange', { detail: globalState }));
}

// В микроприложении
window.addEventListener('globalStateChange', (e) => {
  console.log('Новое состояние', e.detail);
});

Управление стилями и изоляция

Qiankun обеспечивает CSS isolation, предотвращая конфликт стилей между микроприложениями. Это достигается с помощью Shadow DOM или ограниченного CSS prefixing. Для Vue это особенно важно, чтобы стили компонентов не влияли на контейнер или другие микроприложения.

// В конфигурации webpack микроприложения
module.exports = {
  css: {
    extract: false
  }
};

Жизненный цикл микроприложений

Qiankun поддерживает четыре ключевых этапа жизненного цикла:

  1. bootstrap — однократная инициализация, выполняется перед первым монтированием.
  2. mount — монтирование микроприложения в контейнер.
  3. unmount — размонтирование приложения, очистка ресурсов.
  4. update — опциональный хук, вызывается при обновлении состояния или пропсов.

Эти хуки позволяют Vue-приложениям корректно работать внутри Qiankun без утечек памяти и конфликтов событий.

Асинхронная загрузка и оптимизация

Qiankun поддерживает lazy loading микроприложений, что снижает время начальной загрузки контейнера:

registerMicroApps([
  {
    name: 'vue-app1',
    entry: () => fetch('//localhost:7100/asset-manifest.json').then(res => res.json()),
    container: '#container',
    activeRule: '/app1',
  },
]);

Также возможно динамическое подключение CSS и JS через import() и CDN, что облегчает версионирование и обновление микроприложений.

Работа с событиями и коммуникацией

Для обмена данными между микроприложениями и контейнером Qiankun предоставляет global state API. Через него можно реализовать уведомления, синхронизацию пользователя или общие данные:

import { initGlobalState } from 'qiankun';

const state = initGlobalState({ user: null });

state.onGlobalStateChange((newState, prev) => {
  console.log('Состояние изменилось', newState, prev);
});

state.setGlobalState({ user: { name: 'Alice' } });

Особенности интеграции с Vue 3

Vue 3 и Composition API хорошо сочетаются с Qiankun благодаря модульной архитектуре. Использование setup() позволяет изолировать логику компонентов, что упрощает их загрузку и размонтирование в контейнере. Рекомендуется использовать ref и reactive для локального состояния, а глобальные события Qiankun — только для синхронизации между микроприложениями.

Практические рекомендации

  • Всегда использовать уникальные префиксы для CSS и глобальных событий.
  • Разделять роутеры микроприложений и контейнера.
  • Минимизировать зависимость микроприложений друг от друга.
  • Использовать асинхронную загрузку для улучшения производительности.
  • Контролировать жизненный цикл компонентов и своевременно размонтировать Vue-приложения.

Qiankun обеспечивает структурированное, масштабируемое решение для организации крупных фронтенд-проектов, позволяя Vue.js-приложениям работать автономно и эффективно в составе единого контейнера.

Оглавление