AMD / Require JS - Как загружать файлы только по запросу

Это возможно, но сильно зависит от того, как вы структурируете свое JS-приложение. Кроме того, я предполагаю, что у вас есть приложение Backbone. Существуют разные подходы для разных фреймворков.

Например, у вас может быть app.js, который выглядит примерно так:

define([
    'DvdItemView', 'DvdModel', 'DvdCollection', 
    'BookItemView', 'BookModel', 'BookCollection'
], function(DvdView, DvdModel, DvdCol, BookView, BookModel, BookCol) {

   // router declarations go here

});

Поскольку вы «определяете» этот модуль как зависящий от вышеуказанных модулей, они всегда будут загружаться перед запуском кода маршрутизатора. Как указывает @alexndm, если вы запустите r.js, вы сможете объединить все свои модули в один.

Однако, как вы упомянули, как только приложение достигает определенного размера, вам нужно лениво загружать разные части в зависимости от того, с чем взаимодействует пользователь. Это больше проблема приложения, и RequireJS может только помочь вам в этом отношении. Я считаю, что лучший способ сделать это в маршрутизаторе.

routes: {
    '/books': 'booksList',
    '/books/:id': 'booksDetail',
    '/dvds': 'dvdList',
    '/dvds/:id': 'dvdDetail'
},

booksList: function() {
    if (!booksDepsLoaded) {
        // Here we go and load the appropriate files
        require(['BooksArea'], function(BooksArea) {
            // BooksArea.Model, BooksArea.Collection, etc...
            // do stuff to render a book list..
        })
    }
},

...

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

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

Проверьте require-lazy, небольшую библиотеку, которая подключается как во время выполнения, так и во время компиляции (r.js ) Я написал, чтобы сделать то, что вы просите. Основное использование будет:

(из сценария main.js :)

define(["lazy!modules/books", "lazy!modules/dvds"], function(books, dvds) {
    ...
});

Скрипты modules/books и modules/dvds будут как обычно. Переменные books и dvds в приведенной выше функции определения на самом деле являются обещаниями для реальных модулей. Сами модули не загружаются заранее. Затем где-то в main.js код решает, какое представление отображать:

if( view === "books" ) {
    books.get().then(function(realBooks) {
       ...
    });
}
else if( view === "dvds" ) {
    dvds.get().then(function(realDvds) {
       ...
    });
}

Он поддерживает grunt и bower тоже.

На самом деле это возможно сделать с немного другой структурой проекта.

У Джеймса Берка есть репозиторий, в котором подробно описано, как это сделать здесь, https://github.com/requirejs/example-multipage-shim

Основная идея заключается в том, что у вас есть несколько файлов «main.js», которые загружают зависимости для разных областей вашего сайта.

Итак, в вашем случае у вас могут быть файлы main-books и main-dvd.

В вашем HTML-коде для разных областей просто загрузите общие модули, которые вам понадобятся для обеих областей, а затем загрузите конкретный основной файл...

require(['./js/common'], function (common) {
    require(['app/main-books']);
});

Надеюсь, это поможет!

при использовании require.js в продакшене рекомендуется запускать r.js http://requirejs.org/docs/optimization.html

Что он делает: - Объединяет связанные скрипты в слои сборки и минимизирует их с помощью UglifyJS (по умолчанию) или Closure Compiler (вариант при использовании Java). - Оптимизирует CSS, встраивая файлы CSS, на которые ссылается @import, и удаляя комментарии.

Это означает, что ВСЕ ваши скрипты будут объединены в один файл, и не будет никаких дополнительных HTTP-запросов.