将 CDN url 添加到 mvc 4 bundler 输出

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

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

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

以下代码将本地 jQuery 包替换为 CDN 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.
    }

在上面的代码中，jQuery 将在 CDN 中被请求 发布模式和 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 2

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

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

这就是我最终解决它的方法。

我创建了一个 BundleHelper 类，它将包装渲染方法，然后在路径前面加上 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")

希望这会有所帮助。