Преобразование вашего проекта Vue.js в микрофронтенды с рендерингом на стороне сервера

Есть несколько преимуществ преобразования вашего приложения Vue.js в микрофронтенды. С помощью микрофронтендов вы можете безболезненно поэтапно заменить устаревший код, мигрировать технический стек, повторно использовать код с низкой связанностью, а также самое главное: дать возможность нескольким командам работать над одним и тем же продуктом, но в разных кодовых базах ( прощай сливай ад!).

Я предполагаю, что у вас есть относительно большая кодовая база Vue.js, и вы думаете о том, чтобы разделить ее на небольшие микрофронтенды. Рагу может помочь нам в этом. Давайте проверим это!

Создание проекта Vue.js

Очевидно, я делаю это просто для того, чтобы использовать проект в качестве примера. Вам не нужно этого делать, если у вас уже есть проект Vue.js.

$ yarn global add @vue/cli
$ vue create ragu-vue-test-app

Все установлено по умолчанию…

🎉  Successfully created project ragu-vue-test-app.
👉  Get started with the following commands:
$ cd ragu-vue-test-app
$ yarn serve

У нас есть приложение Vue.js, работающее на порту 8080.

Настройка сервера Ragu

Чтобы представить ваши компоненты Vue.js как микроинтерфейсы, вам нужен экземпляр Ragu Server. Ragu Server отвечает за создание и раскрытие ваших микроинтерфейсов с помощью рендеринга на стороне сервера (SSR).

$ yarn add ragu-server ragu-vue-server-adapter webpack-merge

Также нам нужно добавить несколько скриптов для запуска Ragu Server в package.json.

ragu:build для создания производственной сборки.
ragu:start для запуска рабочего сервера с использованием результата сборки.
ragu:dev для запуска сервера разработки. Нет необходимости собирать проект перед запуском сервера разработки.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "ragu:build": "ragu-server build ragu-config.js",
    "ragu:start": "ragu-server run ragu-config.js",
    "ragu:dev": "ragu-server dev ragu-config.js"
  },

Нам также нужен файл с именем ragu-config.js для объявления конфигурации Ragu Server.

Предоставление компонента как микроинтерфейса

Вы помните красивый экран приветствия Vue.js, который мы видели выше? Это будет компонент, который мы будем выставлять. Нам понадобится каталог с именем ragu-components, как определено в config.components.sourceRoot. Давайте назовем наш компонент hello-world, поэтому давайте создадим файл с именем ragu-components/hello-world/index.js.

Это все? Это работает? Давайте проверим это!

yarn ragu:dev

Для предварительного просмотра микро-интерфейса вы можете получить доступ к URL-адресу http://localhost:3101/preview/имя-каталога-ваших-компонентов. В нашем случае hello-world.

🌎 http://localhost:3101/preview/hello-world/

Использование микроинтерфейса Ragu

Хорошо, мы видим тот же экран приветствия Vue.js, но как мы можем использовать его в качестве микроинтерфейса?

Как видите, для использования микроинтерфейса все, что вам нужно, это добавить CDN RaguDOM на вашу HTML-страницу и добавить <ragu-component /> изменение URL-адреса компонента с /preview/ на /components/ . Если вы откроете приведенный выше HTML-код в своем браузере, вы увидите свой микроинтерфейс.

Получение свойств

Практически каждый компонент получает какие-то аргументы, микрофронтенды не исключение. Ваш микроинтерфейс должен иметь возможность получать свойства.

Во-первых, давайте изменим компонент App.vue, чтобы получить заголовок в качестве свойства.

Теперь нам нужно изменить наш ragu-components/hello-world/index.js, чтобы он получал и предоставлял реквизиты компоненту App.vue.

🌎 http://localhost:3101/preview/hello-world/?title=My%20Title

Рендеринг динамического состояния

Как я уже говорил ранее, Ragu Server предоставляет микроинтерфейсы с SSR. Итак, что, если вам нужно какое-то динамическое состояние для рендеринга ваших компонентов? Например, ответ на запрос?

Чтобы иметь динамическое состояние, все, что вам нужно сделать, это создать файл state.js по пути компонента рагу. Теперь вместо того, чтобы получать заголовок из реквизита, мы будем получать имя пользователя и генерировать заголовок с ним.

Функция propsToState получает свойства микроинтерфейса и сопоставляет их с состоянием. Поскольку эта функция должна возвращать Promise, можно выполнить запрос или любой другой асинхронный процесс.

Теперь наш микро-интерфейс должен использовать состояние вместо свойств для рендеринга компонента Vue.js.

Использование CDN Vue.js

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

Можно определить defaultDependencies ваши микро-фронтенды.

nodeRequire представляет оператор require/importimport Vue from 'vue'.
dependency Зависимость для загрузки.
globalVariable Глобальная переменная, которую библиотека выставляет в браузере. Если вы загрузите страницу с CDN Vue.js и наберете Vue в консоли браузера, вы должны увидеть что-то вроде ниже. Все импорты будут заменены этой переменной.

До и после настройки Vue CDN

ЖДАТЬ! ДО ИЗМЕНЕНИЯ БЫЛО ЗАГРУЖЕНО 81,6 КБ JAVASCRIPT, А НЕ 103 КБ. КАКАЯ ОПТИМИЗАЦИЯ! 😡😡

Webpack удаляет неиспользуемый код из пакета, ожидается, что CDN Vue.Js будет тяжелее. Немного математики: если вы загрузите два микрофронтенда одинакового размера, вы получите 90,5+12,5 + 12,5 = 115,5 КБ. Если вы не установили зависимости по умолчанию: 81,3 * 2 = 162,6 КБ. 😀