Какие плюсы и минусы Module Federation при использовании tree shaking

Ответ

Плюсы:

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

Минусы:

  • Требует точной настройки Webpack для корректного tree shaking (оптимизация sideEffects, usedExports).
  • Может не работать с некоторыми библиотеками, если они не поддерживают ESM или имеют побочные эффекты.
  • Усложняет дебаггинг из-за распределенной природы загрузки модулей.

Пример настройки Webpack:

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    sideEffects: true,
  },
}

Ответ 18+ 🔞

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

Плюсы, которые реально радуют:

  • Ты можешь тащить из удалённых приложений только те модули, которые тебе прямо сейчас нужны. Не надо грузить всю эту многопудовую библиотеку, если тебе от неё одна функция. Размер бандла — просто песня, а не цифры.
  • Поддерживает этот ваш динамический импорт, import(). За счёт этого tree shaking работает так, что аж дух захватывает, когда код делишь.
  • И самое сокровенное — общие зависимости можно шарить между микрофронтендами. То есть не будет у тебя в каждом приложении по пять копий React'а, как у дурачка. Экономия — мать её, борьбы!

Но минусы... ёпта, минусы такие, что волосы дыбом.

  • Настраивать этот Webpack — это не просто, это пиздец как не просто. Надо воткнуть sideEffects: true, usedExports: true, и молиться, чтобы всё заработало как надо. Одна опечатка — и привет, оптимизация накрылась медным тазом.
  • Может просто взять и не работать с некоторыми библиотеками. Особенно со старыми, которые про ESM не слышали или там побочные эффекты на каждом углу устраивают. Подозрение ебать чувствую к таким.
  • Дебаггинг... О, это отдельная песня. Когда модули летят с разных серваков, понять, где именно твоя переменная undefined стала — это квест на выживание. Распределённая природа, блядь, загрузки — она и мозги распределяет.

Вот, смотри, как примерно в конфиге Webpack'а это выглядит. Код не трогаю, он святой:

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    sideEffects: true,
  },
}

Вроде бы ничего сложного, да? Ан нет, блядь. Поставил эти флаги — и терпения ноль ебать, пока всё не сойдётся. Но если сойдётся — красота, можно шампанское открывать. Ну, или пиво, смотря по бюджету.