2016-12-08 7 views
13

Я работаю в компании, у которой есть обычай require. Реализация позволяет вам требовать модуль только в том случае, если он уже загружен. Если кодировка зависит от модуля, но код не всегда попадает, модуль не всегда требуется. Это значительно сократило размер нашего файла.Проверить, был ли файл загружен/необходим в Webpack?

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

if (page === PROFILE) { 
    // ProfileHelper should already be downloaded if we're on the profile page. 
    if (isRequired('ProfileHelper')) { 
    const ProfileHelper = require('ProfileHelper'); 
    ProfileHelper.doSomething(); 
    } else { 
    LogError('ProfileHelper isn\'t loaded on the profile page.'); 
    } 
} else if (page === FEED) { 
    // FeedHelper should already be downloaded if we're on the feed page. 
    if (isRequired('FeedHelper')) { 
    const FeedHelper = require('FeedHelper'); 
    FeedHelper.doSomething(); 
    } else { 
    LogError('FeedHelper isn\'t loaded on the feed page.'); 
); 
} 

ProfileHelper не загружен на корма страниц и FeedHelper не загружен на страницах профиля. Есть ли у Webpack что-то вроде этого?

Там есть потенциальное решение здесь: https://github.com/webpack/webpack/issues/526

Однако, это было от 2-х лет назад, и код выглядит довольно Hacky. Есть ли способ лучше? Если это по-прежнему лучший способ, дайте мне знать через ответ, и я буду отмечать его как правильный ответ.

Редактировать разъяснения:

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

Это не имеет ничего общего с дедупликацией.

Редактировать

Компания производит множество различных пучков для разных страниц, но эти пакеты имеют много файлов. Эти файлы ведут себя по-разному на основе страницы, на которой они находятся. Часто не для всех модулей ссылки на файлы будут использоваться для данной страницы. В этом случае эти файлы просто не связаны.

+0

Если ваш вопрос: Есть ли WebPack де-дубликатов необходимых модулей? Да. –

+0

Мой вопрос: как мне что-то требовать, только если он уже загружен. –

+0

Возможно, вам действительно нужно разбить код. https://webpack.github.io/docs/code-splitting.html – Ming

ответ

3

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

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

+0

Webpack, так как v2 также будет включать только те зависимости, которые используются. Поэтому использование, необходимое, как вы хотите в процессе объединения, будет включено только один раз. –

+0

Просто уточняя, это не имеет ничего общего с дедупликацией. –

+0

@ MichałIgnaszewski Все зависимости используются, но не все время. То есть весь файл загружается на несколько страниц, но страницы не используют все кодировки. Зависимости для определенных кодировок. –

0

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

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

Что вы ищете код расщепления: https://webpack.js.org/guides/code-splitting-require/

Учебники:

+0

Компания, с которой я работал, создала множество разных пакетов для разных страниц. В большинстве модулей нет необходимости проверять, в каком пакете он требуется, просто нужно проверить, какие модули уже нужны. Разделение кода увеличивает сетевые запросы, что я хочу, не требует дополнительных сетевых запросов. –