Объединение модулей в RequireJS

Question

Я использую RequireJS для модуляции моего кода. Веб-сайт, который я использую, будет иметь несколько отдельных категорий страниц. Для каждого из них я хочу загрузить общий JS-файл со всеми зависимостями, существующими во всех категориях страниц, наиболее очевидным из которых является jQuery. Я уже успел это сделать.

Для остальных страниц я хочу иметь отдельные файлы JS. Каждая страница имеет свой собственный модуль, но я думаю, что было бы более разумно, если бы я загружал несколько модулей сразу, и когда пользователь переходит на другие страницы, он будет иметь кешированный файл JS и не будет нуждаться в скачать.

На данный момент я попытался объединить эти модули, которые работали довольно хорошо. Тем не менее, я не уверен, как загрузить конкретный модуль из файла. Пока я делаю это:

require(['./js/common'], function (common) {
    require(['public']);
});

common - это файл зависимостей, а public - мой сцепленный файл со всеми зависимостями. Внутри него есть модули для каждой страницы, но я не знаю, как вызвать конкретную страницу. Есть идеи?

Answer 1

Посмотрите на bundles опция для конфигурации RequireJS. В вашем случае это будет что-то вроде:

bundles: {
    public: ['mod1', 'mod2', ...] 
}

Я использовал mod1, mod2 потому что я не вижу названия реальных модулей в вашем вопросе, но вы хотите, чтобы имена модулей были внутри public и что вы хотите загрузить индивидуально. При этом RequireJS будет знать, что когда вы хотите загрузить такой модуль, он должен получить их от public вместо того, чтобы искать их по отдельности.

Тогда вы сможете изменить свой код загрузки на:

require(['./js/common'], function (common) {
    require(['mod1']);
});

Снова, mod1 для иллюстрации.

Answer 2

Взгляните на require-lazy.

Это позволяет объединять независимые части приложения в отдельные пакеты. С точки зрения разработчика, вместо:

define(["module1", "module2"], function(module1, module2) {...});

ты пишешь:

define(["lazy!module1", "lazy!module2"], function(module1, module2) {...});

Модули 1 и 2 не будут загружены заранее; они и их зависимости будут загружены lazilly, когда вы звоните:

module1.get().then(function(realModule1) {
    // here you have access to the real module1
});

Посмотрите примеры для нескольких вариантов использования.