Почему модули материалов-пользовательского интерфейса отображаются как в node_modules, так и в src после встряхивания дерева Webpack 4?

Question

Cloud Native Interactive Landscape - это приложение с открытым исходным кодом, предназначенное только для браузера, которое загружает статическое приложение React для визуализации облачной экосистемы:

• Попробуйте приложение
• Просмотр источник

Вы можете в интерактивном режиме просмотреть результаты веб-пакета-анализатора пакетов и вот снимок:

Я не понимаю, почему @material-ui/core/es появляется как в node_modules, так и src.В целом, я пытаюсь понять, оптимально ли реализовано наше расшатывание дерева или есть ли лучший способ его настройки.Я также был бы признателен, если бы мы оптимально взбодрились.(Обратите внимание, что мы нацелены только на вечнозеленые браузеры.)

Пожалуйста, не стесняйтесь раскошелиться на репо и отредактировать webpack.config.prod.js .Если вы откроете запрос на извлечение, Netlify создаст и развернет тестовый сервер, и вы можете проверить результаты в test-server-url /report.html.

Answer 1

Итак, позвольте мне предисловие, что имя es было выбрано неправильно.src будет гораздо более подходящим, так как это просто: нетранслируемый исходный код.Это задокументировано в документах при минимизации размера комплекта

. При наличии веб-пакета 4 и соответствующих module записей в соответствующих package.json вы должны автоматически добавить версию этих пакетов esmodule.Версия esmodule отвечает за большую часть оптимизации в вебпаке.

@material-ui/core уже имеет правильную запись.Это, однако, только на верхнем уровне версии esmodule.Затем фактические компоненты пишутся с помощью commonJS, который не допускает тряску деревьев в веб-пакете.У нас есть открытый PR , но мы могли бы дождаться следующего майора, так как мы не тестируем скомпилированные файлы, которые вносят изменения в сборку, пугающие.

Почему это выглядит каккаскадный модуль, я не могу вам с этим помочь.Во время исследования я сделал то же самое наблюдение (https://github.com/eps1lon/material-ui-treeshaking). Вероятно, это проблема с анализатором пакетов и не оказывает реального влияния на генерируемые куски (например, https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188).

В целом, я бы рекомендовал не использоватьверсия es и простой веб-пакет, предназначенный для записи module. Это позволяет трясти дерево для большей части пакета, но вы теряете некоторую микрооптимизацию. Я протестировал перенос всего в esmodules и внес некоторые улучшения в размер статистикипакета размером от 200 КБ до 180 КБ, но с некоторой деоптимизацией gzip, который увеличил размер gzip-файла на 1 КБ ( версия мема ).