Блог

Используя Webpack 5, в одном файле ввода у меня настроено несколько динамических импортов следующим образом: import(/* webpackExports: ["moduleName"] */ 'package name'); каждый из этих импортов выполняется при разных условиях. Вероятно, при загрузке страницы на самом деле должен быть вызван только один из 5 или около того импорта. Этот импорт распространяется на несколько разных пакетов.

Проблема в том, что по какой-то причине Webpack объединяет все эти импортные файлы в один, а не в более крупный блок, а не в отдельные блоки, как я ожидал.

Просто чтобы убедиться, что не было какого-либо конфликта перекрестных зависимостей или чего-то еще, я попытался очистить импортированные модули, чтобы они были практически ничем для целей тестирования. Я также пробовал использовать webpackChunkName. Ничего не сработало.

Почему webpack должен создавать один блок, а не несколько? Как я могу это исправить?

Спасибо.

Проблема связана с «состоянием». Условная загрузка не означает, что у нас может быть несколько состояний для одного и того же модуля. Проблемы с побочными эффектами и динамическими привязками заставляют webpack (или любой загрузчик) объединять все экспортируемые модули, которые используются, условно или нет, в один блок.

Таким образом, это ограничение связано с встряхиванием дерева динамически импортируемых модулей.

Я написал больше об этом здесь: https://blog.hotstar.com/how-to-dynamically-import-esmodules-and-tree-shake-them-too-aa24ee4885f5