Напильник в бочке и тряска дерева

Question

Вот пример репозитория, который показывает пример проблемы, описанной в этом потоке: https://github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md

Я пытаюсь понять, каков эффект использования файла Barrel для экспорта функций и классов из проекта библиотеки при его импорте в другой проект, который использует webpack и должен иметь возможность встряхивать пакет.

Представьте, у меня есть проект:

библиотека

• index.ts

• libA.ts

• libB.ts

index.ts имеет этот код:

export { LibAMain } from 'LibA';
export { LibBMain } from 'LibB';

Поэтому я использую индекс как файл-бочку для экспорта всех функций, которые собираюсь разработать в своей библиотеке.

Второй проект будет:

пользователь библиотеки

• index.ts

Index.ts имеет этот код:

import { LibAMain } from 'library'

LibAMain();

Теперь: библиотека-пользователь создается с использованием webpack, который, как я ожидаю, сможет встряхнуть неиспользуемые библиотеки в MyLib, но когда я смотрю на сгенерированный пакет, я вижу, что он содержит загрузочные LibA.js и LibB.js, которые не должны будь там:

Если я изменю index.ts на:

import { LibAMain } from 'library/lib/LibA'

LibAMain();

тогда webpack хорошо справляется со своей задачей, и я вижу только LibA в последнем пакете:

TL;DR: Как я могу продолжать использовать индексный файл ствола и просто импортировать все из "библиотеки", но при этом работать с treehaking?

Спасибо за любую помощь:)

Answer 1

Похоже, проблема модуля в вашем коде, а не в веб-пакете.
tsconfig.json

...
"module": "commonjs",
...

Система модулей Commonjs не поддерживает встряхивание дерева в webpack (работает только прямой импорт, как вы это делали выше)mylib/libA).
Чтобы исправить дрожание дерева в вашем репозитории github, вы должны использоватьmodule: es2015 или esnext в tsconfig.json.

...
"module": "esnext",
...

Но вы правы - к сожалению, дрожание деревьев - не лучшая сторона webpack.
Есть несколько подходов, как лучше встряхнуть дерево:

1. Плагин для улучшения дрожания деревьев
2. Опция побочных эффектов webpack
3. Используемая опция экспорта веб-пакетов
4. Двигаться из webpack к rollup. Rollup по умолчанию имеет первоклассное встряхивание дерева (не рекомендую делать это для больших проектов).

Answer 2

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

По сути, вы можете продолжать использовать файлы бочек , но вам нужно отключить побочные эффекты от этих конкретных файлов ( файлов баррелей ).

Я пробовал это решение в двух отдельных проектах с разными версиями Webpack ( 4 и 5 ), и оно работает на обоих.

Это соответствующая часть конфигурации:

      {
  module: {
    rules: [
      // other rules...
      {
        test: [/src\/common\/index.ts/i, /src\/hooks\/index.ts/i],
        sideEffects: false,
      }
    ]
  }
}

Вот ссылка на проблему GitHub, где я нашел объяснение: https://github.com/vercel/next.js/issues/12557.