Невозможно встряхнуть дерево React и зависимостей, если они не используются

Question

У меня проблемы с мертвым кодом, удаляющим неиспользуемые компоненты React.

Я создал пример проекта здесь - https://github.com/amithgeorge/webpack-issue-demo-1 ...

Три класса определены,

• class A является компонентом реакции, использующим проп-типы,
• class B является компонентом реакции, подключенным к редуксу с использованием connect HOC,
• class C - простой класс, а не компонент реакции -

код - https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/classes.js ....

В файле ввода я только импортирую класс C и использую его - https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/index.js

Я ожидал, что выходной файл будет содержать только класс C, но в нем есть все!

https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/dist/main.js

Если я удаляю propTypes и удаляю connect, то код для ClassA и ClassB отсутствуют. Но вывод по-прежнему содержит весь код React, PropTypes и React-Redux. Если они не используются, как мне получить веб-пакет для их удаления.

Answer 1

Насколько я понимаю, Tree Shaking работает только для модуля ES2015 и Не для модуля CommonJS .

https://webpack.js.org/guides/tree-shaking/

Чтобы проверить это, я создал репо здесь и file1.js с классом MyClass.

Теперь, если вы попытаетесь экспортировать это как ESM и не будете использовать внутри index.js - НЕ будет частью вашего пакета.

Но если вы экспортируете его как CommonJS module.exports = MyClass и не используете - он все равно будет частью вашего пакета.

Та же концепция применима и к Node_Modules.

Модули CommonJS

1. axios
2. reactjs

ESM модули

1. lodash-е

Если вы просто импортируете axios и не используете его - он все равно будет частью пакета, но неиспользованный lodash-es не будет.