Динамический импорт remote компонента Module Federation на Vue 3

Информация в чистом виде — это не знание. Настоящий источник знания — это опыт.

Приветствую всех читателей, что забрели на эту страницу. Вероятно, вы тоже как и я, не нашли должной информации по этой теме, поэтому наслаждайтесь, ведь тут будет вся нужная информация для корректной работы runtime импорта!

Небольшая предыстория, для чего написана эта статья

Погрузившись в работу с Module Federation, я столкнулся с такой проблемой, как отсутствие информации для продвинутых разработчиков. Большинство информации, что я встречал была либо про такую технологию как React, либо Angular. Но примеров с Vue как таковых я не нашел, только самые простые, что конечно же, для продвинутых не катит 🙂 Поэтому пришлось разобраться во всем самому и спустя тысячи проб и ошибок, я наконец то доделал данную задачу и готов рассказать, что же такого волшебного кроется за динамическим импортом во Vue.

Вкратце о Module Federation

Module Federation — это подход в разработке приложений, представленный веб-стандартом, который позволяет разделить приложение на отдельные модули, которые могут быть разработаны, развернуты и подключены независимо друг от друга. Он позволяет комбинировать различные модули и приложения, создавая масштабируемые и гибкие архитектуры.

Основные принципы Module Federation:

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

2. Динамическая загрузка модулей: Модули могут быть загружены и подключены динамически во время выполнения. Это позволяет эффективно использовать ресурсы и уменьшает начальную загрузку приложения.

3. Обмен данными и функциональностью: Модули могут обмениваться данными и предоставлять свою функциональность другим модулям. Это позволяет создавать гибкие и расширяемые приложения.

4. Управление зависимостями: Module Federation позволяет явно управлять зависимостями между модулями. Каждый модуль может указывать, какие модули и версии он требует для своей работы.

Module Federation особенно полезен в среде микросервисной архитектуры и распределенной разработки, где разные команды могут независимо разрабатывать и подключать свои модули к общему приложению.

В контексте фронтенд-разработки, Module Federation стал широко используемым в связке с инструментами, такими как webpack, для создания масштабируемых и гибких микросервисных архитектур на стороне клиента.

Поэтапно напишем Host и Remote приложения

Задумка следующая:
Host — делится своим компонентом Content и будет лежать он на порту 3002. Далее запускаем Remote приложение, ждем пока пользователь введет нужный порт в инпут, далее подгружаем компонент, если такой существует. Profit!

Немного конфигурации:
1) webpack.config.js — описывать в принципе нечего, базовая структура для module federation plugin

...   plugins: [     new MiniCssExtractPlugin({       filename: '[name].css',     }),     new ModuleFederationPlugin({       name: 'home',       filename: 'remoteEntry.js',       exposes: {         './Content': './src/components/Content',       },       shared: {         vue: {           singleton: true,         },       },     }), ... }); 

2) Content.vue:

<template>   <div style="color: #d9c1e4;">{{ title }}</div> </template> <script> export default {   data() {     return {       title: "Remote content component",     };   }, }; </script> 

3) App.vue

<template>   <main class="main">     <h3>Host App</h3>     <Content />   </main> </template>  <script> import { ref, defineAsyncComponent } from "vue"; export default {   components: {     Content: defineAsyncComponent(() => import("./components/Content")),   },   setup() {     const count = ref(0);     const inc = () => {       count.value++;     };      return {       count,       inc,     };   }, }; </script>  <style> /* Немного стилей */ @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');  img {   width: 200px; } h1 {   font-family: Arial, Helvetica, sans-serif; }  html,body {   margin: 0; }  h3 {   margin: 0;   color:#d9c1e4; }  .main{   height: 100vh;   background: gray;   display: flex;   flex-direction: column;   justify-content: center;   font-family: 'Montserrat', sans-serif;   align-items: center;   color: #fff; } </style> 

4) Настройки для package.json:

"scripts": {     "start": "webpack-cli serve",     "serve": "serve dist -p 3002",     "build": "webpack --mode production",     "clean": "rm -rf dist"   },

На этом наш хост готов к использованию. Нужно только подхватить 3002 порт и должным образом обработать.

Теперь конфигурация для Remote приложения:

1) webpack.config.js:

...     new ModuleFederationPlugin({       name: 'layout',       filename: 'remoteEntry.js',       exposes: {},       shared: {         vue: {           singleton: true,         },       },     }), ... 

2) Layout.vue. Тут я разберу немного подробнее, т.к. в этом компоненте находятся ключевые функции для работы программы. В чем заключается алгоритм на данный момент:

• Есть инпут, с привязанной к нему переменной port

• Введя порт можем нажать на кнопку, по которой запускается функция, подхватывающая тот manifest по введенному порту

• Пытаемся создать скрипт из этого манифеста и подсоединить его к нашему приложению

• Как только скрипт загрузился — можем забрать оттуда объект и прикрутить его к динамическому компоненту

3) package.json:

 "scripts": {     "start": "webpack-cli serve",     "serve": "serve dist -p 3001",     "build": "webpack --mode production",     "clean": "rm -rf dist"   },

Перейдем к коду:

Форма с инпутом выглядит следующим образом:

<div class="component">     <p style="font-size:22px; margin-bottom: 5px">Layout App</p>     <div class="form">     <label>Enter port for loading</label>     <input type="text" v-model="port">     <button @click="getRemoteComponent">Get remote component</button> </div>

В принципе, осталось написать функцию getRemoteComponent и готово. Опишем тело функции:

// Для начала зададим конфигурацию для запроса  const uiApplication = {    protocol: 'http',    host: 'localhost',    port: this.port,    fileName: 'remoteEntry.js' } // Теперь построим ссылку const remoteURL = `${uiApplication.protocol}://${uiApplication.host}:${uiApplication.port}/${uiApplication.fileName}`; 

Далее, нужно создать скрипт, который будет подключаться к приложению:

const moduleScope = 'home' // Переменные для дальнейшей конфигурации const moduleName = 'Content'  const element = document.createElement('script'); element.type = 'text/javascript'; element.async = true; element.src = remoteURL;

Если произошла ошибка, обработаем ее следующим образом:

element.onerror = () => {     alert(`Port ${this.port} doesn't have any content! Try another`) }

Если же скрипт успешно загрузился, то можем его обработать, но для его написания потребуется еще одна функция, которая есть в документации webpack‘a:

async loadModule(scope, module) {     await __webpack_init_sharing__('default');     const container = window[scope];     await container.init(__webpack_share_scopes__.default);     const factory = await window[scope].get(module);     const Module = factory();     return Module;   }

Данная функция возвращает объект вида:

Невооруженным глазом видно, что это какая то штука, относящаяся к компоненту, но вот что с ней делать? Ответ прост — передадим этот объект динамическому компоненту из Vue и оно магическим образом соберет этот компонент!

Теперь все таки вернемся к обработке скрипта:

element.onload = () => {     const remoteComponent = this.loadModule(moduleScope, `./${moduleName}`)     remoteComponent.then(res => {       console.log(res.default);       this.dynamicComponent = res.default;      }) }; document.head.appendChild(element);

Вот и все! Наша работа на этом закончена, осталось только приписать этот объект в компонент следующим образом:

<div class="component">     <p style="font-size:22px; margin-bottom: 5px">Remote App</p>     <component :is="dynamicComponent"></component> </div>

Таким образом задача решена, можем радоваться 🙂
Итоговый код компонента Layout.vue:

<template>   <div class="main">     <div class="component">       <p style="font-size:22px; margin-bottom: 5px">Layout App</p>       <div class="form">         <label>Enter port for loading</label>         <input type="text" v-model="port">         <button @click="getRemoteComponent">Get remote component</button>       </div>     </div>     <div class="component">       <p style="font-size:22px; margin-bottom: 5px">Remote App</p>       <component :is="dynamicComponent"></component>     </div>   </div> </template>  <script> export default {   data() {     return {       port: null,       dynamicComponent: null     }   },   methods: {     getRemoteComponent() {       console.log(this.port, '<- Подгружаем по порту')        // Можно конфигурировать любые параметры динамически       const uiApplication = {         protocol: 'http',         host: 'localhost',         port: this.port,         fileName: 'remoteEntry.js'       }        const remoteURL = `${uiApplication.protocol}://${uiApplication.host}:${uiApplication.port}/${uiApplication.fileName}`;       console.log(remoteURL)        const moduleScope = 'home'       const moduleName = 'Content'       const element = document.createElement('script');       element.type = 'text/javascript';       element.async = true;       element.src = remoteURL;        element.onload = () => {         const remoteComponent = this.loadModule(moduleScope, `./${moduleName}`)         remoteComponent.then(res => {           console.log(res.default);           this.dynamicComponent = res.default;         })       };        element.onerror = () => {         alert(`Port ${this.port} doesn't have any content! Try another`)       }        document.head.appendChild(element);     },     async loadModule(scope, module) {       await __webpack_init_sharing__('default');       const container = window[scope];       await container.init(__webpack_share_scopes__.default);       const factory = await window[scope].get(module);       const Module = factory();       return Module;     }   } }; </script>  <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');  * {   font-family: 'Montserrat', sans-serif;   color:#fff; }  body, p {   margin: 0; }  .main {   height: 100vh;   display: flex;   background: gray; }  .component {   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   border: 2px solid #ffff;   padding: 5px;   border-radius: 10px;   width: 100%; }  .form {   display: flex;   max-width: 300px;   flex-direction: column; }  input {   margin: 10px 0;   color:black; }  button {   color: black; }  </style> 

Результат получился следующий (напомню, что хост раздает компонент по 3002 порту):

Весь исходный код можете посмотреть на моем гитхабе

На этом данная статья окончена, надеюсь она была полезна для вас!