1. Введение
Давайте сначала поговорим о заключении: федерация модулей Webpack5 позволяет Webpack добиться эффекта онлайн-среды выполнения, позволяя напрямую обмениваться кодом между проектами с использованием CDN, больше не нужно устанавливать пакет Npm локально, собирать и публиковать его!
Мы знаем, что Webpack может обмениваться кодом через DLL или Externals Common Chunk, но эта задача усложняется между разными приложениями и проектами, и мы едва ли можем выполнять горячую замену по требованию между проектами.
Объединение модулей — важная новая встроенная функция Webpack5, которая позволяет совместное использование модулей между приложениями, так что на этой неделе давайте пропустимwebpack-5-module-federation-a-game-changer-in-javascript-architectureВ этой статье рассказывается, что такое функция «объединения модулей».
2 Обзор и интенсивное чтение
NPM способ обмена модулями
Представьте себе обычный способ обмена модулями, да, NPM.
Как показано на рисунке ниже, при обычном совместном использовании кода необходимо установить зависимости как Lib в проект, упаковать и собрать Webpack, а затем подключиться к сети, как показано на рисунке ниже:
Для проектов Home и Search, когда необходимо поделиться модулем, наиболее распространенным способом является извлечение его в общую зависимость и установка в соответствующих проектах.
Хотя Monorepo может в определенной степени решить проблему повторной установки и модификации, его все равно нужно компилировать локально.
Общий модуль режима UMD
Настоящим способом выполнения может быть UMD-способ совместного использования модулей кода, то есть модули упаковываются в режиме Webpack UMD и выводятся в другие проекты. Это очень распространенный способ обмена модулями:
Для предмета домой и поиск используйте пакет UMD для повторного использования модуля. Однако этот технический план также очевиден, то есть объем пакета не может достичь эффекта оптимизации локальной компиляции, и библиотека легко конфликтует.
Микро интерфейс для обмена модулями
Микро-интерфейс: микро-интерфейс (MFE) также является популярным методом управления совместным использованием модулей в последнее время.Микро-интерфейс предназначен для решения проблемы сосуществования нескольких проектов.Самой большой проблемой сосуществования нескольких проектов является совместное использование модулей, и никаких конфликтов.
Поскольку микроинтерфейс также должен учитывать конфликты стилей и управление жизненным циклом, эта статья посвящена только методу загрузки ресурсов. Обычно существует два метода упаковки для микроинтерфейсов:
- Подприложения упаковываются независимо, а модули более развязаны, но общедоступные зависимости не могут быть извлечены.
- Все приложение упаковано вместе, чтобы решить вышеуказанные проблемы, но скорость упаковки слишком низкая и не имеет возможности горизонтального масштабирования.
модульная федерация
Наконец, упомянул главного героя этой статьи, Federated Module, одну из встроенных основных функций Webpack5:
Как видно из рисунка, это решение заключается в прямом применении пакета одного приложения к другому приложению, и в то же время оно имеет возможность извлекать публичные зависимости, которые упаковывают все приложение вместе.
Предоставление приложению возможности модульного вывода фактически открывает новую форму приложения, а именно «центральное приложение».Это центральное приложение используется для динамического распространения подмодулей среды выполнения в Интернете и недоступно пользователям напрямую:
Для микрофронтендов эта картинка идеально подходит для основного приложения, потому что все подприложения могут использовать метод Runtime для повторного использования пакетов и модулей Npm основного приложения для лучшей интеграции в основное приложение.
Объединение модулей используется следующим образом:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
// other webpack configs...
plugins: [
new ModuleFederationPlugin({
name: "app_one_remote",
remotes: {
app_two: "app_two_remote",
app_three: "app_three_remote"
},
exposes: {
AppContainer: "./src/App"
},
shared: ["react", "react-dom", "react-router-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
chunks: ["main"]
})
]
};
Сама федерация модулей представляет собой обычный плагин Webpack.ModuleFederationPlugin
, у плагина есть несколько важных параметров:
-
name
Текущее имя приложения требует глобального уникального имени. -
remotes
другие проекты могут бытьname
Сопоставляется с текущим проектом. -
exposes
Указывает на экспортированный модуль. Только модули, объявленные здесь, могут использоваться в качестве удаленных зависимостей. -
shared
Это очень важный параметр, сформулировав этот параметр, можно изменить соответствующие зависимости удаленно загружаемых модулей для использования React или ReactDOM локального проекта.
например, установкаremotes: { app_twp: "app_two_remote" }
, в коде вы можете напрямую использовать следующие методы для прямого вызова модуля из другого приложения:
import { Search } from "app_two/Search";
этоapp_two/Search
Отapp_two
Конфигурация:
// app_two 的 webpack 配置
export default {
plugins: [
new ModuleFederationPlugin({
name: "app_two",
library: { type: "var", name: "app_two" },
filename: "remoteEntry.js",
exposes: {
Search: "./src/Search"
},
shared: ["react", "react-dom"]
})
]
};
просто такSearch
существуетexposes
экспортируется, поэтому мы можем использовать[name]/[exposes_name]
Этот модуль, который является локальным модулем для указанного приложения.
3 Резюме
Объединение модулей представляет собой готовое решение для крупных интерфейсных приложений и было создано как официальный модуль Webpack 5. Можно сказать, что это последнее решение для повторного использования кода во время выполнения после Externals.
Кроме того, Webpack5 также имеет большое количество встроенных функций кэширования во время компиляции.Видно, что будь то производительность или многопроектная организация, Webpack5 пытается дать свои собственные лучшие идеи.Ждем официального релиза Webpack5 фронтенд-инжиниринг перейдет на новый этап.
Адрес обсуждения:Интенсивное чтение «Новые возможности Webpack5 — федерация модулей» · Выпуск № 239 · dt-fe/weekly
Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.
Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе
Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)