Как использовать загрузчик JavaScript, такой как head.js или labjs в Magento

Question

Вне себя Magento поставляется с более чем полдюжиной библиотек JavaScript, которые не помогают с и без того громоздким временем загрузки. Кто-нибудь смог успешно использовать загрузчик сценариев, такой как head.js или labjs, с Magento, чтобы они могли загружаться асинхронно? Я пытался, но не могу заставить его работать.

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

Answer 1

Что касается встроенных скриптов, существует программное решение.

Вы можете написать Observer, который связывается с core_block_abstract_to_html_after или controller_action_layout_render_before событиями, которые запускаются непосредственно перед выводом отрендеренного HTML. В Observer вы можете использовать preg_replace для вставки оператора head.ready сразу после каждого тега <script>.

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

Вы можете использовать встроенный Magento Profiler для проверки удара. Стоит попробовать хотя бы.

НТН,
JD

Answer 2

хорошо, я использую jquery для этого. и это прекрасно работает.
Все, что вам нужно сделать, это сделать ajax-запрос, который возвращает скрипт, а затем оценить скрипт, используя eval. Вы можете написать свою собственную функцию для этого, но jquery уже имеет несколько хороших подходов.
Для отдельных сценариев функция $.getScript работает хорошо. По сути, это расширение функции $.ajax, которое указывает, что вы запрашиваете скрипт. синтаксис такой:

$.getScript('my_script_url',function(){
    // do whatever needs to be done after the script loads
    alert('my script was asynchroniously loaded');
});

Если у вас есть больше скриптов, которые вы хотите добавить через ajax, у jquery есть отличный способ сделать это:

$.when(
    $.getScript("/script_1.js"), 
    $.getScript("/script_2.js"), 
    $.getScript("/script_3.js")
    // ...
    //$.getScript("/script_n.js")
).then(
    // on succes
    function(){
        alert('good to go!');
    },
    // on failure
    function(){
        alert('loading failed. one or more scripts encountered a problem :(');
    }
);

Answer 3

Всем загрузчикам такого типа потребуется внести некоторые изменения в каждый скрипт на вашем сайте. Я знаю - я только что реализовал LABjs в системе, которая, когда я показал grep, показала более 400 файлов с каким-то тегом сценария !!