Single-SPA интеграция

Single-SPA — это фреймворк для микрофронтендов, позволяющий объединять приложения на разных технологиях в единую страницу. Vue.js отлично подходит для такой архитектуры благодаря своей модульности и реактивной системе. Интеграция Vue с Single-SPA требует понимания жизненного цикла приложений и особенностей работы Vue в микроархитектуре.

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

Для начала необходимо установить базовые зависимости:

npm install vue@next vue-router@4 single-spa single-spa-vue
  • vue@next — актуальная версия Vue 3.
  • vue-router@4 — современный маршрутизатор Vue.
  • single-spa — ядро для микрофронтендов.
  • single-spa-vue — адаптер для интеграции Vue приложений в Single-SPA.

Структура проекта может быть следующей:

/micro-vue-app
 ├─ src/
 │   ├─ main.js
 │   ├─ App.vue
 │   └─ components/
 ├─ package.json
 └─ index.html

Настройка адаптера single-spa-vue

Создается точка входа main.js:

import { h, createApp } from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';
import router from './router';

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render: () => h(App),
    router,
  },
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

Пояснение:

  • createApp — стандартная функция Vue для инициализации приложения.
  • appOptions.render — функция рендера, передающая корневой компонент App.
  • router — если используется маршрутизация, необходимо передать объект Vue Router.
  • Возвращаемые методы bootstrap, mount и unmount соответствуют жизненному циклу микрофронтенда Single-SPA.

Управление жизненным циклом

Single-SPA разделяет жизненный цикл приложения на три стадии:

  1. Bootstrap — инициализация приложения, создание зависимостей.
  2. Mount — рендер компонентов на страницу.
  3. Unmount — очистка ресурсов, удаление компонентов из DOM.

В контексте Vue эти стадии управляются адаптером single-spa-vue. Например, метод unmount уничтожает экземпляр Vue и удаляет слушатели событий, предотвращая утечки памяти при переходе между микрофронтендами.

Настройка маршрутизации Vue внутри микрофронтенда

Маршрутизатор Vue создается обычным способом:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

export default router;

При использовании Single-SPA рекомендуется:

  • Использовать createWebHistory() для изоляции истории приложения.
  • Синхронизировать путь с глобальным состоянием микрофронтендов при необходимости.

Динамическая загрузка компонентов

Для снижения размера микрофронтенда применяется ленивый импорт компонентов:

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');

Это позволяет загружать код только при необходимости, снижая нагрузку на основной бандл страницы.

Взаимодействие с другими микрофронтендами

Single-SPA предоставляет глобальное событие customEvent для коммуникации между микрофронтендами. В Vue можно подписаться на эти события через жизненный цикл компонентов:

mounted() {
  window.addEventListener('global-event', this.handleEvent);
},
beforeUnmount() {
  window.removeEventListener('global-event', this.handleEvent);
},
methods: {
  handleEvent(event) {
    console.log('Получено событие:', event.detail);
  }
}

Рендер в контейнере

Single-SPA позволяет размещать приложение Vue в любом DOM-элементе. Для этого используется свойство domElementGetter:

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render: () => h(App),
    router,
  },
  domElementGetter: () => document.getElementById('vue-root'),
});
  • domElementGetter возвращает DOM-элемент, в который будет монтироваться Vue-приложение.
  • Позволяет гибко размещать микрофронтенды на странице без изменения глобальной структуры.

Оптимизация и производительность

  • Изоляция CSS через scoped стили для предотвращения конфликтов с другими микрофронтендами.
  • Использование defineAsyncComponent для ленивой загрузки тяжелых компонентов.
  • Управление состоянием через Pinia или Vuex с локальными и глобальными сторами, чтобы минимизировать зависимость от общих состояний.

Особенности Vue 3 в микрофронтендах

  • Composition API облегчает повторное использование логики между компонентами.
  • Reactivity API обеспечивает реактивное обновление интерфейса даже при разделении на несколько микрофронтендов.
  • Teleport и Suspense позволяют интегрировать компоненты в разные части DOM и обрабатывать асинхронные операции внутри микро-приложения.

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

  1. Каждое Vue-приложение должно быть максимально автономным.
  2. Избегать глобальных стилей и мутирующих методов на объекте window.
  3. Минимизировать зависимости на другие микрофронтенды, чтобы снизить связанность.
  4. Использовать ленивую загрузку маршрутов и компонентов для оптимизации скорости и размера бандла.
  5. Всегда удалять подписки и слушатели при unmount для предотвращения утечек памяти.
Оглавление