Наиболее эффективная настройка Multipage RequireJS и Almond

У меня есть несколько страниц на сайте с использованием RequireJS, и большинство страниц имеют уникальную функциональность. Все они совместно используют множество общих модулей (jQuery, Backbone и т.д.); все они имеют свои собственные уникальные модули. Мне интересно, как лучше всего оптимизировать этот код, используя r.js. Я вижу несколько альтернатив, предложенных различными частями документации и примеров RequireJS и Almond, поэтому я придумал следующий список возможностей, которые я вижу, и я спрашиваю, какой из них наиболее рекомендуется (или если есть другой лучший способ)

Оптимизируйте один JS файл для всего сайта, используя Almond, который будет загружаться один раз, а затем Оставайтесь в кэше. Недостатком этого самого простого подхода является то, что я загружаю на каждый код страницы, который пользователю не нужен для этой страницы (т.е. Модули, относящиеся к другим страницам). Для каждой страницы загруженный JS будет больше, чем нужно.
Оптимизировать один JS файл для каждой страницы, который будет включать как общие, так и специальные страницы. Таким образом, я мог бы включать Almond в каждый файл страницы и загружал бы только один JS файл на каждую страницу, что было бы значительно меньше, чем один JS файл для всего сайта. Однако недостатком я вижу, что общие модули не будут кэшироваться в браузере, верно? Для каждой страницы, к которой пользователь обращается, ей придется повторно загрузить основную часть jQuery, Backbone и т.д. (Общие модули), поскольку эти библиотеки будут составлять большую часть каждого уникального одностраничного JS файла. (Кажется, это подход многостраничного примера RequireJS, за исключением того, что в примере не используется Almond.)
Оптимизировать один JS файл для общих модулей, а затем другой для каждой конкретной страницы. Таким образом, пользователь будет кэшировать файл общих модулей и, просматривая между страницами, должен будет загружать только небольшой JS файл с конкретными страницами. В рамках этой опции я вижу два способа завершить ее, чтобы включить функцию RequireJS: а. Загрузите файл require.js перед общими модулями на всех страницах, используя синтаксис data-main или обычный тег <script> - вообще не используя Almond. Это означает, что на каждой странице будут три JS файла: require.js, общие модули и специальные модули. б. Кажется, что этот смысл предлагает метод подключения Almond в каждый оптимизированный файл - поэтому мне не пришлось бы загружать require.js, но вместо этого будет включать Almond как в мои общие модули, так и в мои модули, относящиеся к странице. Это правильно? Это более эффективно, чем загрузка require.js upfront?

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

Ответ 1

Я думаю, вы очень четко ответили на свой вопрос.

Для производства мы делаем - как и большинство компаний, с которыми я работал с опцией 3.

Вот преимущества решения 3, и почему я думаю, что вы должны использовать его:

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

Вот интересное преимущество для решения 2:

Вы отправляете наименьшие данные на каждую страницу. Если много ваших посетителей одно время, например, на целевой странице - это ваш лучший выбор. Время загрузки не может быть переоценено по важности в сценариях, ориентированных на конверсию.
Повторяются ли ваши посетители? некоторые исследования свидетельствуют о том, что 40% посетителей имеют пустой кеш.

Другие соображения:

Если большинство ваших посетителей посещают одну страницу - рассмотрите вариант 2. Вариант 3 отлично подходит для сайтов, где средние пользователи посещают несколько страниц, но если пользователь посещает одну страницу и что все, что он видит, - что ваш лучший выбор.
Если у вас много JavaScript. Подумайте о загрузке некоторых из них, чтобы дать пользователю визуальную индикацию, а затем загрузите остальную часть в отложенном виде асинхронно (с приложением тега script или непосредственно с требованием, если вы уже используете его). Порог для людей, замечающих что-то, "неуклюжий" в пользовательском интерфейсе, как правило, составляет около 100 мс. Примером этого является загрузка GMail... ".
Учитывая, что HTTP-соединения Keep-Alive по умолчанию в HTTP/1.1 или с дополнительным заголовком в HTTP/1.0, отправка несколько файлов меньше проблем, чем 5-10 лет назад. Убедитесь, что вы отправляете заголовок Keep-Alive с вашего сервера для клиентов HTTP/1.0.

Некоторые общие рекомендации и материалы для чтения:

JavaScript minification является обязательным, r.js, например, делает это красиво, и ваш мыслительный процесс при использовании был правильным. r.js также объединяет JavaScript, который является шагом в правильном направлении.
Как я и предположил, отсрочка JavaScript действительно очень важен и может значительно увеличить время загрузки. Отсрочка выполнения поможет быстро оценить время загрузки, что очень важно, гораздо важнее в некоторых сценариях, чем загрузка на самом деле.
Все, что вы можете загрузить с CDN, как внешние ресурсы, которые вы должны загрузить с CDN. Некоторые библиотеки, которые используют сегодня, например, jQuery, являются довольно высокой ценой (80kb), извлечение их из кеша действительно может принести вам пользу. В вашем примере я бы не загружал Backbone, underscore и jQuery с вашего сайта, скорее, я бы загрузил их из CDN.

Ответ 2

Я создал примерный репозиторий, чтобы продемонстрировать эти 3 вида оптимизации.

Это может помочь нам лучше понять, как использовать r.js.

https://github.com/cloudchen/requirejs-bundle-examples

Ответ 3

FYI, я предпочитаю использовать вариант 3, следуя примеру https://github.com/requirejs/example-multipage-shim

Я не уверен, насколько он эффективен.

Тем не менее, я считаю это удобным, потому что:

Нужно только настроить require.config(в разных библиотеках в одном месте)
Во время оптимизации r.js, затем определите, какие модули должны группироваться как общие

Ответ 4

Я предпочитаю использовать параметр 3, и я могу с уверенностью сказать вам, почему это так.

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

Я перечислил намного лучшие варианты для того же самого.

Ответ 5

Вы можете использовать любую сеть доставки контента (CDN), например MaxCDN, чтобы гарантировать, что ваши файлы js будут обслуживаться всем. Также я предлагаю вам разместить ваши js файлы в нижнем колонтитуле вашего html-кода. Надеюсь, что это поможет.