Question

使用内置的MVC4捆绑器，如何将我的CDN URL添加到它生成的链接标记中？我已经设置了Amazon Cloudfront，以便在首次请求时从我的网络服务器中提取资产。所以当我像这样定义一个包时：

 bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/reset.css",
    "~/Content/960_24_col.css",
    "~/Content/Site.css"
 ));

部署后，我可以这样引用它：

http://[cloundfrontid].cloudfront.net/Content/css?v=muhFMZ4thy_XV3dMI2kPt-8Rljm5PNW0tHeDkvenT0g1

现在我只需要将捆绑器生成的链接更改为相对于指向我的CDN的绝对链接。

  <link href="[INSERT_CDN_URL_HERE]/Content/css?v=muhFMZ4thy_XV3dMI2kPt-8Rljm5PNW0tHeDkvenT0g1" rel="stylesheet"/>

我认为可以使用IBundleTransform重写路径，但我找不到任何这方面的例子。

注意：为了清楚起见，我知道您可以为捆绑包指定CDN链接，但只有在捆绑包可以被静态链接替换时才有效。

Answer 1

我刚刚设置了MaxCDN并遇到了同样的问题。

如您所知，bundles.UseCdn属性并不理想，因为我们不希望必须为捆绑包指定确切的URL。像Max CDN这样的CDN是完全相同的URL，查询字符串和所有，除了不同的子域。

以下是我最终解决问题的方法。

我创建了一个BundleHelper类，它将包装render方法，然后在CDN子域前面添加路径。

以下是该课程的内容：

namespace MyDomain.Web.Helpers
{
    public class BundleHelper
    {
        public static string CdnPath = "http://cdn.mydomain.com";

        public static IHtmlString RenderScript(string path)
        {
            var opt = System.Web.Optimization.Scripts.Render(path);
            string htmlString = HttpUtility.HtmlDecode(opt.ToHtmlString());

            if (BundleTable.EnableOptimizations)
            {
                htmlString = htmlString.Replace("<script src=\"/", String.Format("<script src=\"{0}/", CdnPath));
            }

            return new HtmlString(htmlString);
        }

        public static IHtmlString RenderStyle(string path)
        {
            var opt = System.Web.Optimization.Styles.Render(path);
            string htmlString = HttpUtility.HtmlDecode(opt.ToHtmlString());

            if (BundleTable.EnableOptimizations)
            {
                htmlString = htmlString.Replace("<link href=\"/", String.Format("<link href=\"{0}/", CdnPath));
            }

            return new HtmlString(htmlString);
        }
    }
}

然后在视图中使用它，我只是这样做：

@BundleHelper.RenderStyle("~/Content/css")
@BundleHelper.RenderStyle("~/Content/themes/base/css")

@BundleHelper.RenderScript("~/bundles/jquery")
@BundleHelper.RenderScript("~/bundles/jqueryui")

希望这有帮助。

Answer 2

请查看@ Using a CDN搜索“使用CDN”

正如By Rick Anderson在asp.net/mvc中所说，

以下代码用CDN jQuery替换本地jQuery包   束。

    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.
    }

在上面的代码中，将在CDN中请求jQuery 发布模式和jQuery的调试版本将在本地获取在调试模式下。使用CDN时，您应该有一个回退机制如果CDN请求失败。以下标记片段来自布局文件的结尾显示脚本添加到请求jQuery应该 CDN失败了。

    </footer>

        @Scripts.Render("~/bundles/jquery")

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script> 

        @RenderSection("scripts", required: false)
    </body>
</html>

已经粘贴了Asp.net/MVC的部分，如果你发现它有用，那么干杯给Rick Anderson的帖子......

Answer 3

在这里查看我对类似问题的回答：https://stackoverflow.com/a/18500359/725626

以BigJoe714的答案为基础，提出了一个略有不同的选择。

将CDN URL添加到mvc 4 bundler输出

3 个答案: