Встряхивание дерева общих зависимостей в федерации модулей webpack 5

Question

Я работаю над архитектурой для динамической панели мониторинга с компонентами, полученными из разных пакетов удаленного реагирования с использованием федерации модулей webpack 5. У меня есть разные библиотеки, которые используются в некоторых из этих удаленных пакетов. Эти пакеты можно раскачивать по дереву. Таким образом, каждый удаленный комплект будет иметь разные коды из одного и того же пакета. Если я использую эти пакеты как одноэлементные, когда два компонента с одинаковой зависимостью загружаются в DOM во время выполнения, может ли веб-пакет каким-либо образом получить код библиотеки из обоих объединенных пакетов? Или необходимо отключить встряхивание дерева в таких разделяемых библиотеках? (Под разделяемыми библиотеками я имел в виду пакеты npm)

Answer 1

Webpack автоматически отключает встряхивание дерева для общих пакетов.

Answer 2

Не имея возможности точно понять, что вы хотите сделать, я не совсем уверен, полностью ли это отвечает на ваш вопрос, но может быть полезно в ситуации. Вы можете получить более точный контроль над связками с помощью оптимизации modules.exports. Здесь вы можете получить довольно подробную информацию. Пример fontawesome находится в верхней части фрагмента кода вместе с настройками оптимизации.

      // Import within node app

  if ($('.fad').length) {
    import('../../node_modules/@fortawesome/fontawesome-pro/scss/duotone.scss');
  }

// Webpack 

modules.exports {
  optimization: {
    splitChunks : {
      chuncks: 'all',
      cacheGroups: {
      duotonecss: {
      test    : /[\\/]node_modules[\\/]@fortawesome[\\/]fontawesome-pro[\\/]scss[\\/](duotone)\.scss/,
      name    : 'duotonecss',
      chunks  : 'all',
      enforce : true,
       },
     },
    },
  },
};