Когда загружаются файлы Require.js?

Question

Что определяет, как раннее требование.js загружает файлы, которые требуются? Выполняется загрузка, как только выполняется сценарий? После DOMContentLoaded? Что-то другое?

Я профилирую страницу, которую хочу оптимизировать, и одна вещь, которую я постоянно замечаю, заключается в том, что Требование срабатывает заметно позже других сценариев, что может быть причиной?

Answer 1

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

Похоже, вы используете несколько тегов сценариев на своей странице, поэтому, если бы мне пришлось угадать, я бы сказал, что зависимость RequireJS просто загружается позже других тегов скрипта. Here's a whole bunch of info on the load and execute order of script tags.

В противном случае мое понимание RequireJS заключается в том, что оно загружает вещи по мере необходимости. Представьте, что ваш RequireJS тег выглядит следующим образом:

<script src="lib/require.js" data-main="main.js"></script> 

Если файл main.js выглядит следующим образом:

requirejs.config({ /*conf */ }); 

Затем RequireJS загружает главный файл, который конфигурирует RequireJS, и ничего не делает больше. Позже, возможно, один из файлов выглядит следующим образом:

/* code, code code */ 
require(
    ['dist/module'], 
    function(distModule){ 
     /* code code code */ 
    } 
); 

В это точка, Требовать бы начать стреляя запросы, чтобы решить любые цепи зависимостей для dist/module. Если какой-либо код до этого вводит задержку (например, ожидая загрузки чего-либо или если он заключен в jQuery DOMReady), RequireJS не начнет загружать модули до тех пор, пока все эти задержки не будут решены.

---

Мое положение немного другое, и это может дать некоторую проницательность. У меня есть только один сценарий тег в моем приложении:

<script src="vendor/require.js" data-main="build/app"></script> 

Моего главный файл выглядит следующим образом:

requirejs.config({ /*conf */ }); 

require(
    ['dist/module1', 'dist/module2'], 
    function(distModule1, distModule2){ 
     /* code code code */ 
    } 
); 

distModule1 и distModule2 удара от загрузки всего приложения, и будет выпалить каждый запрос получить то, что нужно для основного вида. Когда я перемещаю приложение, он запускает запрос, чтобы получить то, что ему нужно для последующих просмотров. Я фактически использовал r.js whole-project optimizer, чтобы скомпилировать все в один единственный файл, поэтому, как только он загрузится, загрузится приложение всего (300 КБ или около того).

---

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

Каждый раз, когда встречается модуль, RequireJS загружает их asynchronously. Любая задержка, которую вы видите, может быть связана с этим.