Предисловие: Мы используем архитектуру микро-интерфейса для решения проблемы огромного объема приложений.Практикуя концепцию микро-интерфейса, мы разделяем интерфейс-приложение на несколько микро-приложений (приложений, которые могут быть развернуты независимо и слабо связаны). . В то же время наличие микроприложений позволяет нам строить по требованию, а не создавать огромное приложение, что значительно ускоряет эффективность построения. Но это решает проблему только на уровне приложения.В промежуточных и фоновых сценариях приложений могут быть общие зависимости модулей между различными микроприложениями и базой.Если модули могут использоваться совместно между приложениями, размер гомографии может быть значительно оптимизирован.
1. Npm-зависимости
Самый простой способ — извлечь модули, которыми необходимо поделиться, которые могут быть библиотекой инструментов или библиотекой компонентов, а затем упаковать их в пакет npm, а затем установить зависимости модуля в каждом подприложении, чтобы достичь множественный эффект повторного использования проекта
Это означает, что каждое приложение имеет один и тот же пакет npm. По сути, нет реальной реализации совместного использования и повторного использования модулей, но уровень кода является общим и повторно используемым. Когда приложение упаковано и собрано, зависимые пакеты по-прежнему будут упакованы вместе. .
Недостатки следующие:
- Каждое микроприложение будет упаковывать этот модуль, что приведет к избыточным пакетам зависимостей и отсутствию реального общего повторного использования.
- когда
npm包После выпуска обновления микроприложение по-прежнему необходимо пересобирать, что громоздко и неэффективно для отладки (если только вы не используетеnpm link)
2.Git Submodule (субмодуль)
Ale Children's Shoes: Если мы не создадим интрасеть npm, не захотим открывать исходный код модулей и будем полагаться на npm, если изменения предполагают повторный выпуск, есть ли другой способ решить вышеуказанные проблемы?
2.1 Сравнение нпм
Вы можете попробовать Git Submodule, он предоставляет механизм управления зависимостями, аналогичный пакету npm, разница между ними показана на следующем рисунке👇
2.2 Как использовать
По в проекте приложения, поgit submodule add <submodule_url>Удаленно извлеките проект подмодуля, и вы обнаружите, что в проекте приложения есть еще два файла..gitmodulesа также子模块目录
Этот подмодуль является нашим общим модулем, это полныйGitДругими словами, репозиторий: все, что мы используем в каталоге проекта приложения.git add/commitНа него это не влияет, то есть субмодуль имеет свой независимый контроль версий
Суммировать:submoduleПо сути, модули, от которых зависит проект, добавляются через git submodule add, и, наконец, формируется законченный проект. А добавленный модуль фактически не входит в проект, а содержит только индексную информацию, о которой говорилось выше..gitmoduleдля хранения подмодулей联系方式, чтобы добиться синхронизации связанных подмодулей. Файл будет извлечен только тогда, когда он загружен и запущен локально
Часть командной строки:
-
git submodule add <子模块repository> <path>: добавить подмодуль -
git submodule update --recursive --remote: получать обновления для всех подмодулей
2.3 Monorepo
Ale Children's Shoes: 🌲 Соус из дерева, я помню человека по имени
MonorepoЧто это такое и в чем разница между ним и Git Submodule?
Полное название монорепоmonolithic respoitory, то есть единый склад, суть которого заключается в том, чтобы позволить нам помещать несколько проектов на один и тот же склад для управления. Рекомендуется не разбивать репо, а управлять процессом построения, номером версии и т. д. каждого модуля на одном складе.
Это может избежать большой избыточной избыточности node_module, потому что каждый проект будет устанавливать vue, vue-router и другие пакеты, или webpack, babel, mock и т. д., необходимые для локальной разработки, что приведет к пустой трате места для хранения.
Так как же управляется Monorepo? Сообщества с открытым исходным кодом, такие какbabel、vueПроект основан на поддержке Monorepo (инструмент Lerna)
Возьмем в качестве примера Babel.В github мы видим, что каждый модуль находится в указанной директории пакетов, а это значит, что все связанные пакеты помещаются в репозиторий для управления.Не раздувает ли это проект?
Вот в чем вопрос, А Ле и А Кан начали спор~
наконец выбрать
MonorepoМонолитный склад илиMultirepoУправление несколькими складами зависит от вашего бизнес-сценария.Удобство централизованного управления Monorepo, такое как простое управление версиями, зависимостями и прочим, а также простая отладка, но также приносит много неудобств 👇
- Более высокие требования к унифицированным инструментам сборки
- Склад слишком велик, а стоимость обслуживания также высока.
🌲 Соус Я случайно слишком много наговорил, и есть разница между Monorepo и Git Submodule
-
Первый: монорепозиторий хранит исходный код всех подмодулей в одном репо.
-
Последнее: подмодули хранят все «индексы» подмодулей только в основном репо.
В настоящее время Monorepo не используется внутри для фактической реализации.В настоящее время существует слишком много зависимостей и перекрытий в фоновых приложениях, основанных на архитектуре микроинтерфейса.Позже мы подробно поделимся ими на практике.
3. Webpack external
мы знаем
webpackимеютexternalsКонфигурация в основном используется для настройки: исключить зависимости в бандле, выводимом webpack.Иными словами, через зависимости, определенные во external, конечный выходной бандл не имеет этой зависимости.В основном подходит для сторонних зависимостей, которые не необходимо часто упаковывать и обновлять, что позволяет совместно использовать модули.
Ниже приведен файл конфигурации vue.config.js.Настроив external, удалите сторонние зависимости, которые не часто обновляются и не упаковываются👇
Вы можете сделать это, добавив после команды, определенной сценарием в packjson--reportПроверяйте схему анализа после упаковки 📦, если это вебпак, используйте плагинwebpack-bundle-analyzer
Ale Children's Shoes: 🌲 Соус из дерева, как после удаления этих зависимостей обеспечить нормальное использование приложения?
Среда браузера: мы используем метод cdn для введения в файл записи, конечно, вы также можете предварительно упаковать его, например, упаковать ведро семейства vue вvue-family.min.jsфайл и, наконец, добиться эффекта совместного использования модулей несколькими приложениями.
<script src="<%= VUE_APP_UTILS_URL %>static/js/vue-family.min.js"></script>
Резюме: избегайте объединения пакетов (пакетов) общедоступных модулей в пакеты, но получайте эти зависимости расширения извне во время выполнения.
Таким образом, общедоступный модуль загружается в базовое микроинтерфейсное приложение, а внешняя ссылка на тот же модуль из микроприложения удаляется, чтобы модуль можно было использовать совместно.
Однако бывают ситуации, когда стек технологий микроприложений диверсифицирован и не унифицирован: кто-то может использовать vue3, а кто-то — реактивную разработку, но внешние не могут ее поддерживать.多版本共存, для которых этот метод неприменим
4. Webpack DLL
Официальное введение: Слово «DLL» представляет собой динамическую библиотеку, первоначально представленную Microsoft, Другими словами, в моем понимании, ее можно использовать в качестве кеша, а предварительно скомпилированный сторонний пакет внешних зависимостей может сэкономить время, когда приложение смешивается при упаковке.
Суть Webpack DLL и внешнего, упомянутого в предыдущем разделе, заключается в решении одной и той же задачи: не ставить сторонние внешние зависимости в бандл приложения (бизнес-код), а затем загружать эту часть зависимостей во время выполнения, чтобы реализовать повторное использование модулей, а также повысить скорость компиляции и построения
В режиме webpack dll необходимо настроить две конфигурации webpack. Ниже приведены основные два основных плагина.
4.1 DllPlugin
DllPlugin: настроить в автономном веб-пакетеwebpack.dll.config.js, цель состоит в том, чтобы создать файл DLL пакета, который упаковывает все зависимости сторонних библиотек вместе, а также создаетmanifest.jsonфайл для:让使用该第三方依赖集合的应用配置的DllReferencePlugin能映射到相关的依赖上去Конкретная конфигурация показана на рисунке ниже👇
4.2 DllReferencePlugin
DllReferencePlugin: Ядро плагина заключается в том, чтобы ссылаться на файл dll, упакованный и сгенерированный в webpack.dll.config.js, упомянутый в предыдущем разделе, для использования в реальном проекте.Механизм ссылки заключается в чтении манифеста поставщика. json через плагин DllReferencePlugin. Посмотрите, есть ли эта сторонняя библиотека, и, наконец, передайтеadd-asset-html-webpack-pluginПлагин автоматически вставляется в HTML-код записи, сгенерированный в предыдущем разделе.vendor.dll.jsфайл, см. следующий рисунок для конкретной конфигурации👇
5. Модуль федерации Модуль федерации
Федерация модулей — это новая важная функция, представленная Webpack5, которая действительно может реализовать совместное использование модулей между приложениями, что устраняет неудобства совместного использования в методе общедоступных пакетов NPM в прошлом, а также может использоваться в качестве посадочного решения для микроинтерфейсов. что идеально. Во-вторых, убейте последние два раздела, чтобы представить функции веб-пакета.
использовалqiankunНебольшие партнеры qiankun должны знать, что степень детализации управления микроинтерфейсной архитектурой qiankun находится в应用层面, а степень детализации управления Module Federation находится в模块层面. Напротив, последний имеет меньшую степень детализации и может иметь больше вариантов выбора.
Еще один момент, который отличается от архитектур микроинтерфейса, таких как qiankun, заключается в том, что нам обычно нужна центральная база для управления жизненным циклом микроприложений, в то время как Module Federation децентрализована, без концепции центральной базы каждый модуль или приложения могут быть импортированы или экспортированы, мы можем назвать их:host和remote, приложение или модуль может быть либо хостом, либо удаленным, либо комбинацией этих двух
Проверьте этот пример ниже
Ядро лежит в нескольких свойствах в ModulefederaterPlugin
-
remote: Указывает, какие удаленные устройства использовать в качестве хоста; -
exposes: указывает, какие атрибуты экспорта предоставляются хосту для использования при использовании в качестве удаленного -
shared: Вы можете изменить соответствующие зависимости удаленно загруженных модулей, чтобы использовать vue локального проекта, другими словами, сначала использовать зависимости хоста.Если у хоста его нет, используйте свои собственные наконец.
Позже мы также сделаем общий доступ к лендингу вокруг Module Federation.
🌲 Рекомендуем к прочтению:
你好，我是🌲 树酱，请你喝杯🍵 记得三连哦～
1.阅读完记得点个赞哦，有👍 有动力
2.关注公众号:前端那些趣事，陪你聊聊前端的趣事
3.文章收录在Github frontendThings 感谢Star✨