Webpack не будет связывать неиспользуемые именованные объекты экспорта (используя приложение Create React)

Question

Малый репозиторий, который демонстрирует проблему: https://github.com/Huuums/repro-webpack-treeshaking-object-issue

У меня есть файл customIcons.jsx, который экспортирует несколько путей SVG (некоторые из которых я могу или не могу использовать в какой-то момент). Я экспортирую только 2 из 4 значков в App.js (в приведенном выше примере).

import { abacus, addressBook } from './customIcons';

Однако, когда я сейчас запускаю yarn build, размер пакета такой же большой, как если бы я импортированы все 4 иконки. Он не меняется вообще, в зависимости от того, сколько значков я импортирую в App.js. Только когда я опускаю весь оператор импорта (не импортируя ничего из файла), я вижу, что размер пакета main.[hash].chunk.js уменьшается.

Я что-то не так делаю, что веб-пакет не трясет неиспользуемые объекты?

Answer 1

https://webpack.js.org/guides/tree-shaking/#mark -the-file-as-side-effect-free

Оказывается, вы должны пометить свой пакет как "sideEffectfree", чтобы иметь место переход на деревья.

Установка "sideEffects": false внутри пакета. json выпуск.