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

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

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

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

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

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

В файле ввода я только импортирую класс C и использую его - "noreferrer">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. Если они не используются, как мне заставить webpack удалить их.


person Amith George    schedule 10.09.2018    source источник


Ответы (1)


Насколько я понимаю, встряхивание дерева работает только для модуля 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

Модули ЕСМ

  1. lodash-es

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

person Ravi Roshan    schedule 17.09.2018
comment
Спасибо за попытку. Но это не верное решение. Если вы проверите окончательный пакет, то есть main.js, в нем нет кода для Class C. Webpack удалил ВСЕ. Он оставил только код времени выполнения, необходимый для веб-пакета. - person Amith George; 18.09.2018
comment
у вас есть шанс пройти через это снова? - person Amith George; 19.09.2018
comment
@AmithGeorge: Понятно, дай мне 30 минут, я опубликую новый ответ. - person Ravi Roshan; 19.09.2018
comment
@AmithGeorge: обновлен этот ответ новыми выводами. Пожалуйста, подтвердите на вашем конце. - person Ravi Roshan; 19.09.2018