Webpack дерево не работает между пакетами - PullRequest
Новая
       12

Webpack дерево не работает между пакетами

1 голос
/ 24 марта 2019

Добрый вечер!

Я несколько дней пытался заставить дерево работать между различными пакетами.

Прежде чем идти дальше, я создал минимальное повторение, которое я объяснюв этом посте: https://github.com/Apidcloud/tree-shaking-webpack

Я также открыл вопрос о репо в вебпаке: https://github.com/webpack/webpack/issues/8951

Для простоты в примере используется только вебпак. Babel не используется .

В приведенном выше примере есть два пакета, оба с соответствующим набором:

  • core - экспортирует 2 функции, cubeи unusedFn
  • consumer - импортирует cube из core и экспортирует свою собственную функцию, consumerFn

Базовый пакет

core package

Обратите внимание, что функция square не экспортируется в файл index.js.Это способ узнать, что встряхивание дерева действительно работает, по крайней мере, в пределах core, поскольку оно не включено в окончательный комплект (что правильно).

Потребительский пакет

enter image description here

Как видите, из core импортируется только cube.Затем он экспортирует свою собственную функцию (consumerFn), потребляя cube.

Проблема

Проблема состоит в том, что в пакет consumer входит все, что есть в пакете core.То есть он включает unusedFn, когда не должен, что приводит к увеличению пакета.

В конечном счете, цель состоит в том, чтобы сделать то же самое в монорепо с несколькими пакетами.Нет смысла иметь их, если каждый пакет объединяет все от других.Цель состоит в том, чтобы связать только то, что необходимо для каждого пакета.

Используя optimizationBailout Я вижу, что плагин ModuleConcatenation выдает некоторые предупреждающие сообщения.Я также использовал --verbose флаг: enter image description here

Вот мой webpack.config.js: 

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    core: './src/index.js',
    consumer: './consumer/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    // for simplicity sake I removed the UMD specifics here.
    // the problem is the same, with or without it.
  },
  optimization: {
    usedExports: true,
    sideEffects: true
  },
  stats: {
    // Examine all modules
    maxModules: Infinity,
    // Display bailout reasons
    optimizationBailout: true
  }
};

У меня также есть "sideEffects": false в package.json.

Я тоже просмотрел руководство , но я не уверен, чего не хватает.

Смежные вопросы:

...