Проверяется, загружен ли модуль в Webpack?

Я работал в компании, у которой есть собственный JS-модуль. Реализация имеет функцию requireIfLoaded, которая позволяет вам запрашивать модуль, но только если он уже был загружен. Если модуль еще не загружен, выдается ошибка. Использование requireIfLoaded не связывает модуль. Это резко сократило наш размер файла.

Вот пример того, как это может быть полезно:

if (page === PROFILE) {
  // ProfileHelper should already be downloaded if we're on the profile page.
  const ProfileHelper = requireIfLoaded('ProfileHelper');
  ProfileHelper.doSomething();
} else if (page === FEED) {
  // FeedHelper should already be downloaded if we're on the feed page.
  const FeedHelper = requireIfLoaded('FeedHelper');
  FeedHelper.doSomething();
}

Для страницы профиля и страницы канала создается отдельный пакет. require('ProfileHelper') не вызывается в путях кода страницы канала, поэтому ProfileHelper не входит в пакет каналов. require('FeedHelper') не вызывается в кодовых путях страницы профиля, поэтому FeedHelper не входит в комплект профилей. Есть ли в Webpack что-то подобное?

Изменить для уточнения:

Если мне все время требуются и ProfileHelper, и FeedHelper, то один из модулей будет неиспользован. Не более одного из них загружается на любой странице. На странице профиля загружен ProfileHelper, но не FeedHelper. Наоборот, для страницы канала.

Кроме того, я не хочу использовать require.ensure, потому что он асинхронный.

Ответ 1

Webpack будет дедуплицировать все модули, требуемые несколько раз, а модули, которые уже загружены, не будут снова инициализированы (следуя спецификации CommonJS). Итак, в основном, просто требуйте все ваши зависимости напрямую, и вы настроены!

Что еще более важно: не оберните свой запрос, если вы используете webpack. Статический анализ для определения того, какие модули вы используете, перестанет работать точно, а веб-пакет будет слишком много.

Ответ 2

Этот подход противоречит связыванию с webpack.

Заявления о требовании - это то самое, что инструктирует webpack о том, что нужно компилировать. Он никогда не будет компилировать ваши условные требования, потому что они будут оцениваться во время выполнения (но пакеты пакета веб-пакетов предварительно скомпилированы), и веб-пакет не добавит ни одного из них в ваши пакеты.

То, что вы ищете, это разделение кода: https://webpack.js.org/guides/code-splitting-require/

Учебники:

Ответ 3

Из вашего вопроса и ваших комментариев кажется, что ProfileHelper загружается через отдельный тег <script> и доступен в области window для немедленного использования, без дальнейшей асинхронной загрузки.

Кроме того, эти помощники, по-видимому, не управляются requireIfLoaded, и если они еще не загружены, они сгенерируют.

Таким образом, согласно этим предположениям, роль requireIfLoaded состоит просто в том, чтобы проверить, доступен ли модуль в window, и выдать ошибку, если это не так.

Итак... почему бы не создать свой собственный requireIfLoaded?

function requireIfLoaded(file) {
  let m = window[file];
  if(m) {
    return m;
  } else {
    throw new Error('Cannot find module '${file}'')
  }
}

Я что-то пропустил?

Ответ 4

Я нашел документацию, которая объясняет это. это говорит "Несмотря на различные варианты загрузки JavaScript, до сих пор нет способа загрузить файл JavaScript и настроить его на выполнение в произвольное время. Вы можете сказать выполнить немедленно или отложить до завершения работы с документом DOM, но вы не можете указать в любой другой момент времени для выполнения кода. "

Для получения дополнительной информации Разделение загрузки и установки JavaScript