我知道这是一个老话题,但我来这里是为了寻找一种捆绑 CDN 资源的实际方法。从@Chris Pratt 的回答中,我明白这是不可能的。
如果您想知道,我正在根据Google's Web Performance Best Practises 优化现有项目,当有多个脚本标签时得分较低,而当所有脚本捆绑到单个脚本引用时得分较高。
我需要一种方法来按顺序捆绑所有 CDN 脚本资源以及本地资源。我处理了这个github repo,它解决了我的问题。
使用它,您可以构建一个包含捆绑包列表的捆绑包,每个捆绑包都包含对 cdn 资源的引用、要保存到的本地资源以及指示您是否希望捆绑包被缩小的布尔值。
List<Bundle> jsBundles = new List<Bundle>();
jsBundles.Add(new Bundle("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js", @"~/jquery.min.js", Bundle.BundleType.JavaScript, false));
jsBundles.Add(new Bundle("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js", @"~/jquery-ui.min.js", Bundle.BundleType.JavaScript, false));
jsBundles.Add(new Bundle(@"~/my-local-script.js", Bundle.BundleType.JavaScript, true));
要放置在页面上,请使用
@jsBundles.Load();
这将处理列表中的所有捆绑包,下载过去 24 小时内未下载的捆绑包的内容(它每 24 小时更新一次或在 Web 应用程序重新启动时更新)。所有下载的内容都将放在本地文件中(如果指定)。
所有内容都将组合成最终结果,最终结果将在脚本标签(或CSS的链接标签)中假脱机到页面中。
Load 函数还接受最终脚本/css 内容的本地文件 URL。如果指定,将给出一个带有 src 的标签,该标签指向该本地文件的相对路径。例如
@jsBundles.Load("~/js/all-my-scripts.js");
上面的语句会返回类似:
<script src="~/js/all-my-scripts.js"></script>
如果提供了 Load 函数的第二个参数,则可以在脚本标签中添加异步属性。
它也适用于 css cdn 资源。例如
List<Bundle> cssBundles = new List<Bundle>();
cssBundles.Add(new Bundle("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css", @"~/jquery.ui.css", Bundle.BundleType.CSS, false));
cssBundles.Add(new Bundle(@"~/css/my-local-style.css", Bundle.BundleType.CSS, true));
@cssBundles.Load("~/css/all-my-styles.css");
这是为了那些像我一样来到这里寻找一种实际捆绑 CDN 资源的方法的人。