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

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

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

Определены три класса,

  • class A - это реагирующий компонент, использующий проп-типы,
  • class B - это компонент реакции, связанный с redux с помощью 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. Если они не используются, как мне заставить веб-пакет удалить их.

5
0
803
1

Ответы 1

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

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

enter image description here

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

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

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

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

Модули CommonJS

  1. аксиомы
  2. реагировать

Модули ESM

  1. Lodash-es

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

Спасибо за попытку. Но это неверное решение. Если вы проверите окончательный комплект, то есть main.js, в нем нет кода для Class C. Webpack удалил ВСЕ. Остался только код времени выполнения, необходимый для webpack.

Amith George 18.09.2018 10:44

у тебя был шанс пройти через это снова?

Amith George 19.09.2018 19:20

@AmithGeorge: Понятно, дайте мне 30 минут, я опубликую новый ответ.

Ravi Roshan 19.09.2018 20:58

@AmithGeorge: Обновил этот ответ новыми выводами. Пожалуйста, подтвердите на своей стороне.

Ravi Roshan 19.09.2018 21:31

Другие вопросы по теме