Фронтальные микромодули более достойны похвалы!

Vue.js
Фронтальные микромодули более достойны похвалы!

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

Преимущества микромодулей заключаются в следующем:

  • Модульная сборка по запросу
  • Выпуск модульного развертывания, добавочное обновление
  • Совместное использование микромодулей между проектами (поддерживает настройку хоста и версии)

Разницу между микроинтерфейсом и микромодулем см. на следующем рисунке.

Архитектура микроинтерфейса

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

Архитектура микромодуля

Архитектура микромодулей — это скорее решение для компиляции, упаковки и совместного использования модулей в рамках одного стека прикладных технологий.


Микромодули на самом деле являются спецификацией организации файлов проекта, а не новой технологией, как показано на следующем рисунке:


Не знаю, нашли вы или нет, на самом деле виновником медленной компиляции является:npm run serveа такжеnpm run build. когда мы выполняемnpm запустить подачу иКогда npm run build, он полностью компилируется, полностью упаковывается и выпускается.В прошлом мы всегда считали, что должны оптимизировать конфигурацию веб-пакета, чтобы решить проблему медленной компиляции. На самом деле, мы можем рассмотреть возможность создания микромодулей. Потому что мы действительно можем найти источник низкой производительности компиляции, только если будем четко различать, что мы должны компилировать, а что нет.

Модульная сборка по запросу


Выпуск модульного развертывания, добавочное обновление

На самом деле он упакован Webpack UMD. Это очень распространенный способ обмена модулями.


Делитесь микромодулями между проектами (поддерживает настройку хоста и версии)


Наконец, я хочу поговорить о федерации модулей федерации модулей webpack5.В настоящее время я думаю, что ее сценарий может быть больше для решения общих модулей между кросс-приложениями, но он не такой гибкий, как микромодуль. Я думаю, что использование одного компонента в разных приложениях должно быть редкостью. Затем я попробовал федерацию модулей и обнаружил, что она не может выполнять динамический импорт (вы можете попробовать, как показано ниже). Но я думаю, что будущее федерации модулей webpack5 вполне ожидаемо, и это станет отличной вещью!

адрес проекта webpack5-module-federation-for-vue, можете попробовать:

GitHub.com/Leisi Group/Башня…

Статьи, связанные с федерацией модулей webpack5:

zhuanlan.zhihu.com/p/115403616

Tickets.WeChat.QQ.com/Yes/wayeOrganizationMk…

Официальная организация федерации модулей webpack5:

GitHub.com/module — Поделитесь...


Если вы считаете это полезным, пожалуйста, ставьте лайк и комментируйте, спасибо 🙏