Yepnope or Modernizr.load() with bundling in ASP.NET MVC 4

С времето и натрупването на опит при писането на различни проекти – за зареждането на Javascript файлове съм обособил няколко основни стъпки, които следвам.

В <head> винаги зареждам само AMD файла и (в повечето от случаите) този за анализаторите.

А преди тагът </body> зареждам инициализиращия файл, като в него са „namespace“ с дефинициите на глобалните променливи, window променливите и методи и логиката за асинхронното зареждане за останалите Javascript файлове. Най-често го наименувам Init.js.

За асинхронното зареждане използвам основно Yepnope. Разбира се, ако сте ASP.NET MVC разработчик, най-вероятно използвате Modernizr.load() (по разбираеми причини :о), което реално пак е Yepnope, но вкаран в контекста на Modernizr.

Новото в ASP.NET 4 е BundleConfig файла, където може окажете вашите bundle колекции от Javascript и/или CSS файлове.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/Init/Js").Include("~/UI/Scripts/Global/Init.js"));

    ...

    BundleTable.EnableOptimizations = true;
}

Това е съвсем нормално описание. Нищо, което да е различно или да изисква специално внимание. Естествено извикването във view-то (почти винаги е в _Layout) също е „по-учебник“:

@section scripts {
    @Scripts.Render("~/Init/Js")  
}

Интересното идва, когато се опитате реферирате bundle вътре в Init.js. Разбира се може да го направите динамичен, като Razor View, но… може да го реферирате и директно като…

В BundleConfig файла:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/Init/Js").Include("~/UI/Scripts/Global/Init.js"));
    bundles.Add(new ScriptBundle("~/Actions/Js").Include("~/UI/Scripts/Fn/Actions.js"));

    ...

    BundleTable.EnableOptimizations = true;
}

В Init.js файла

Modernizr.load({
    load: ['/Actions/Js'],
    complete: function () { ... }
});

Трябва да внимавате за имената на реалните и виртуалните пътища. Също така, ако го ползвате в CSS фаилове с @import (макар да не го препоръчвам), трябва да внимавате при релативните отстъпи на пътищитата за катинките.