Workbox с микрофронтендами

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

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

npm install workbox-cli workbox-sw workbox-build

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

import {precacheAndRoute} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  ({request}) => request.destination === 'script' || request.destination === 'style',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);

Кэширование отдельных микрофронтендов

Каждый микрофронтенд может иметь собственный сервис-воркер или общий для всех модулей. Оптимальная стратегия — комбинировать два подхода:

  1. Общий сервис-воркер для базовых библиотек — React, Vue, Angular, сторонние UI-библиотеки.
  2. Локальные сервис-воркеры или отдельные кэши для микрофронтендов — модульные JS и CSS, уникальные изображения.
registerRoute(
  ({url}) => url.pathname.startsWith('/mf1/'),
  new StaleWhileRevalidate({
    cacheName: 'mf1-cache',
  })
);

registerRoute(
  ({url}) => url.pathname.startsWith('/mf2/'),
  new StaleWhileRevalidate({
    cacheName: 'mf2-cache',
  })
);

Такой подход предотвращает лишнее перезаписывание кэшей при обновлении одного микрофронтенда, не затрагивая остальные.

Управление версионированием и обновлениями

Workbox поддерживает стратегию управления версиями через precacheAndRoute. Для микрофронтендов это критично, так как обновления одного модуля не должны ломать работу других.

precacheAndRoute([
  {url: '/mf1/main.js', revision: '12345'},
  {url: '/mf2/main.js', revision: '67890'},
]);

В случае обновления ревизия меняется, и сервис-воркер автоматически подхватывает новую версию файла. Это предотвращает «битые» кэши и гарантирует корректную работу всего приложения.

Стратегии кэширования

StaleWhileRevalidate — часто используется для скриптов и стилей, так как позволяет показывать пользователю кэшированную версию, одновременно обновляя её на фоне.

CacheFirst — подходит для редко обновляемых ресурсов: изображения, шрифты, CDN-библиотеки.

NetworkFirst — полезно для данных, где приоритетом является свежесть контента, например, API-запросы к микрофронтендам.

registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 3,
    plugins: [
      // Можно добавить Workbox plugin для управления сроком жизни кэша
    ],
  })
);

Работа с общими библиотеками

Для микрофронтендов критично избегать дублирования библиотек в кэше. Workbox позволяет вынести общий кэш для всех микрофронтендов:

registerRoute(
  ({url}) => url.pathname.startsWith('/libs/'),
  new CacheFirst({
    cacheName: 'shared-libs',
  })
);

Это снижает трафик и ускоряет загрузку страниц при навигации между микрофронтендами.

Автоматизация генерации сервис-воркеров

Workbox CLI и Webpack-плагины позволяют автоматически генерировать сервис-воркеры и манифесты кэширования. Для микрофронтендов важно включать опцию разделения манифестов по модулю:

const {injectManifest} = require('workbox-build');

injectManifest({
  swSrc: './src/service-worker.js',
  swDest: './dist/service-worker.js',
  globDirectory: './dist',
  globPatterns: ['mf1/**.js', 'mf2/**.js', 'libs/**.js'],
});

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

Мониторинг и обновление кэша

Workbox предоставляет события для контроля жизненного цикла сервис-воркера. В микрофронтендах это позволяет инициировать обновление только тех модулей, которые были изменены:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

Сервис-воркер можно программно активировать для конкретного микрофронтенда, не влияя на остальное приложение.

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

Оглавление