Динамично зареждане на Vue плъгини в main файл

Разработвам В2В приложение, което има една входна точка, но се ползва от различни клиенти с различни домейни, различна визии и собствени функционалности. На базата на домейна и още няколко хитрини, разпознавам коя конфигурация да се зареди и така, макар и една, входната точка и всичко след нея е силно персонализирано.

Една от особеностите на Vue е, че плъгините се регистрират глобално и ако имате нужда от различни плъгини в различните конфигурации, ще трябва да зареждате само тези, които са нужни. Това може да стане динамично в main файла.

// main.ts

import Vue from 'vue';

const loadPlugin = (pluginName: string): Promise<void> => {
  return import(`@/plugins/${pluginName}`).then((module) => {
    Vue.use(module.default);
  });
};

// Example usage
if (client === 'MyPressureClient') {
  loadPlugin('my-pressure-client-plugin');
} else {
  loadPlugin('my-regular-client-plugin');
}

// ...

В този пример функцията loadPlugin приема име на плъгин като аргумент и динамично импортира съответния модул на плъгина.

До тук добре, но когато имате над 50 плъгина и даден клиент използва около 10 от тях, то схемата с започва да тежи и да изчезва паралелизъма на зареждане.

За да се справя с това, създавам един обект, който съдържа масив от плъгини за всеки клиент и зареждам всички наведнъж с Promise.all.

const plugins = clientConfig.plugins || {};
const pluginLoaders: Promise<{ name: string; plugin: any }>[] = [];

if (plugins?.plugin-one) {
  pluginLoaders.push(import('@/plugins/plugin-one').then((m) => ({ name: 'PluginOne', plugin: m.default })));
}
if (plugins?.plugin-two) {
  pluginLoaders.push(import('@/plugins/plugin-two').then((m) => ({ name: 'PluginTwo', plugin: m.default })));
}
if (plugins?.plugin-three) {
  pluginLoaders.push(import('@/plugins/plugin-three').then((m) => ({ name: 'PluginThree', plugin: m.default })));
}

// ... още плъгини, които клиента ползва, ако има такива

// Зареждате всички плъгини паралелно (50-70% по-бързо от последователното)
const loadedPlugins = await Promise.all(pluginLoaders);

// Регистрирайте плъгините по ред
loadedPlugins.forEach(({ name, plugin }) => {
  app.use(plugin);
});

Елегантно и ефективно. DX на MAX )