Utilisation de l'offre groupée ASP.NET 4.5 et d'un CDN (par exemple CloudFront)

Question

ASP.NET 4.5 dispose d'une nouvelle fonction de regroupement intéressante et semble prendre en charge l'utilisation des CDN. Voici l'exemple donné par Microsoft pour l'utilisation de la fonction de regroupement avec un CDN

public static void RegisterBundles(BundleCollection bundles)
{
  //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  //            "~/Scripts/jquery-{version}.js"));

  bundles.UseCdn = true;   //enable CDN support

  //add link to jquery on the CDN
  var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

  bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include(
            "~/Scripts/jquery-{version}.js"));

  // Code removed for clarity.
} 

Ce qui semble suggérer que vous devez lui indiquer explicitement le chemin d'accès à votre fichier sur le CDN.

Le CDN CloudFront (et beaucoup d'autres, je suppose) vous donne un sous-domaine qui reflète le vôtre. Lorsque vous cliquez sur http://uniquesubdomain.cloudfront.net/js/myfile.js?v=1 il sert http://mydomain.com/js/myfile.js?v=1

De cette façon, vous pouvez simplement préfixer tous vos liens avec http://uniquesubdomain.cloudfront.net/ et vos fichiers sont des serveurs de CloudFront.

La fonction de regroupement d'ASP.NET 4.5 est-elle compatible avec ce type de CDN ? Existe-t-il un moyen intégré permettant à la fonction de regroupement de préfixer tous ses liens avec votre domaine CDN ?

Eg.

bundles.UseCdn = true;
var myBundle= new ScriptBundle("~/bundles/js", "https://uniquedomain.cloudfront.net/");
myBundle.Include("~/js/file1.js");
myBundle.Include("~/js/file2.js");

causerait

    <script src="https://uniquedomain.cloudfront.net/bundles/js?v=6y-qVPSK3RYOYHfPhOBDd92H4LjEjs-D3Hh2Yml6CXA1"></script>

Answer 1

Cette fonctionnalité n'est pas intégrée, mais elle est possible grâce à quelques petites méthodes d'aide. Voici ce que j'utilise pour l'instant :

public static class Cdn
{
    private const string CdnRoot = "//cloudfrontdomainhere.com";

    private static bool EnableCdn
    {
        get
        {
            bool enableCdn = false;
            bool.TryParse(WebConfigurationManager.AppSettings["EnableCdn"], out enableCdn);
            return enableCdn;
        }
    }

    public static IHtmlString RenderScripts(string bundlePath)
    {
        if (EnableCdn)
        {
            string sourceUrl = CdnRoot + Scripts.Url(bundlePath);
            return new HtmlString(string.Format("<script src=\"{0}\"></script>", sourceUrl));
        }

        return Scripts.Render(bundlePath);
    }

    public static IHtmlString RenderStyles(string bundlePath)
    {
        if (EnableCdn)
        {
            string sourceUrl = CdnRoot + Styles.Url(bundlePath);
            return new HtmlString(string.Format("<link href=\"{0}\" rel=\"stylesheet\" />", sourceUrl));
        }

        return Styles.Render(bundlePath);
    }
}

Notez que j'ai mon propre paramètre de configuration appelé EnableCdn dans la section appSettings de mon fichier de configuration. Lorsqu'il est appelé depuis une vue Razor, il produit la sortie correcte, qui ajoute le domaine CDN aux chemins.

Dans vos fichiers Razor, il suffit de faire Cdn.RenderScripts("~/pathtoscriptbundle")

Answer 2

Ce n'est peut-être pas exactement ce que vous recherchez, mais un grand nombre de CDN agissent désormais comme un proxy inverse en utilisant le DNS, ce qui vous évite d'avoir à lier vos ressources de manière explicite. Je sais que Cloudflare le fait et je suis sûr que d'autres le font aussi.

Answer 3

Une autre option, est d'utiliser la méthode scripts ou Styles RenderFormat comme ceci. Cela m'a été particulièrement utile car je personnalise occasionnellement le tagFormat pour envelopper les références dans des commentaires html conditionnels, ou ajouter des attributs supplémentaires comme media="screen,print". Le code est plus simple car vous pouvez effectuer le remplacement maladroit d'une chaîne de caractères, avant qu'elle ne devienne une chaîne codée en HTML.

Vous pouvez également utiliser le tagFormat comme paramètre facultatif pour les méthodes dont la valeur par défaut est constituée des constantes de type chaîne mentionnées ci-dessous.

public class BundleHelper
{
    public static readonly string StyleTagFormat = "<link href=\"{0}\" rel=\"stylesheet\"/>";
    public static readonly string ScriptTagFormat = "<script src=\"{0}\"></script>"

    /// <summary>
    /// Customised script bundle rendering method with CDN support if optimizations and CDN enabled.
    /// </summary>
    public static IHtmlString RenderScriptFormat(string tagFormat, string path)
    {
        // Check for absolute url to ensure the standard framework support for CDN bundles, with a CdnPath still works.
        if (AppSettings.Bundling.EnableCdn && !UriHelper.IsAbsoluteUrl(Scripts.Url(path).ToString()))
        {
            tagFormat = tagFormat.Replace(" src=\"{0}\"", String.Format(" src=\"{0}{{0}}\"", AppSettings.Bundling.BundlesCDNPrefixUrl));
        }
        return Scripts.RenderFormat(tagFormat, path);
    }

    /// <summary>
    /// Customised styles bundle rendering method with CDN support if optimizations and CDN enabled.
    /// </summary>
    public static IHtmlString RenderStyleFormat(string tagFormat, string path)
    {
        // Check for absolute url to ensure the standard framework support for CDN bundles, with a CdnPath still works.
        if (AppSettings.Bundling.EnableCdn && !UriHelper.IsAbsoluteUrl(Styles.Url(path).ToString()))
        {
            tagFormat = tagFormat.Replace(" href=\"{0}\"", String.Format(" href=\"{0}{{0}}\"", AppSettings.Bundling.BundlesCDNPrefixUrl));
        }
        return Styles.RenderFormat(tagFormat, path);
    }
}

public class UriHelper
{
    /// <summary>
    /// Determines whether a url is absolute or not.
    /// </summary>
    /// <param name="url">Url string  to test.</param>
    /// <returns>true/false.</returns>
    /// <remarks>
    /// Examples:
    ///     ?IsAbsoluteUrl("hello")
    ///     false
    ///     ?IsAbsoluteUrl("/hello")
    ///     false
    ///     ?IsAbsoluteUrl("ftp//hello")
    ///     false
    ///     ?IsAbsoluteUrl("//hello")
    ///     true
    ///     ?IsAbsoluteUrl("ftp://hello")
    ///     true
    ///     ?IsAbsoluteUrl("http://hello")
    ///     true
    ///     ?IsAbsoluteUrl("https://hello")
    ///     true
    /// </remarks>
    public static bool IsAbsoluteUrl(string url)
    {
        Uri result;
        return Uri.TryCreate(url, UriKind.Absolute, out result);
    }
}

Answer 4

Ce n'est pas possible, mais au lieu de bundle vous pouvez utiliser un modèle de texte pour combiner les fichiers JS en un seul js et le mettre sur CDN.

<#@ ... hostspecific="true"  extension=".js">

<#

    Write (System.IO.File.ReadAllText("a.js"));
    Write (System.IO.File.ReadAllText("b.js"));
 #>