使用 ASP.NET MVC 捆绑和缩小 AWS CloundFront CDN 文件

Question

捆绑：它是一个简单的逻辑文件组，可以通过唯一名称引用并在HTTP请求器上加载。

缩小：这是从代码中删除不必要的空格、换行符和注释以减小其大小从而缩短加载时间的过程。

这是我的想法，

基本上，我使用多个CCS，JS和Image文件来实现代码的模块化，可读性和可维护性。这里多个JS和CSS文件需要来自浏览器的多个HTTP请求，导致我的网页的性能和加载时间下降，在某些情况下会导致网站整体性能下降。

我想将所有静态内容存储到 AWS S3 中，并通过 CloudFront 分发链接提供它们，并将这些 CDN 路径用于我的多个项目，并进行捆绑和缩小。

我一直在尝试将所有 JS 文件从 CDN 捆绑到一个捆绑包中（用于捆绑和最小化），就像下面的代码一样，但这不起作用！

var myCDN = "http://cdn.myawsdomain.com/";
bundles.Add(new ScriptBundle("~/bundles/js", myCDN)
        .Include(
                 "~/MyS3BucketName/Scripts/jquery.cookie.js",
                 "~/MyS3BucketName/Scripts/bootstrap.min.js",
                 "~/MyS3BucketName/Scripts/wow.min.js"
               ));

也尝试了下面的代码，但这不起作用！

bundles.Add(new ScriptBundle("~/bundles/js")
       .Include(
       "http://cdn.myawsdomain.com/MyS3BucketName/Scripts/jquery.cookie.js",
       "http://cdn.myawsdomain.com/MyS3BucketName/Scripts/bootstrap.min.js",
       "http://cdn.myawsdomain.com/MyS3BucketName/Scripts/wow.min.js"
       ));

任何帮助将不胜感激。

Answer 1

我正在回答我自己的问题，因为它可能对某人有很大帮助。

我已经使用 MVC 捆绑包配置生成了 JS 和 CSS 文件的压缩和缩小版本 ASP.Net。我们不能在捆绑包配置中将多个 CDN 组合在一起（仅一个脚本）。

我已经执行了以下步骤来生成压缩和缩小的JS和CSS文件，

一个。 使用脚本包虚拟路径（"~/scripts/bundle"）在捆绑包配置中包含必要的JS文件，并检查网页是否在浏览器中加载没有错误。

BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/scripts/bundle")
       .Include("~/Yourscriptfile1.js")
       .Include("~/Yourscriptfile2.js")
       .Include("~/Yourscriptfile3.js")
        );

二. 要将所有这些JS文件压缩并缩小为一个文件，请从本地计算机浏览器将HTTP请求发送到虚拟路径（http://localhost:254/scripts/bundle），并将响应保存到"output.min.js"文件中。

三. 将"output.min.js"文件上传到 S3 存储桶并设置此对象公有只读属性，添加具有远未来到期日期的过期标头，并将 S3 存储桶配置为 CDN。

key="Cache-Control"， value="max-age=1814400" - [3 周]key="过期"， 值="2021 年 12 月 30 日星期四 16：00：00 GMT" - [仅限远未来的到期日期]

d. 现在，通过将上面的代码（步骤-a）更改为下面的代码，在捆绑配置文件中配置您的CDN，

BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;
string CDN = "http://cdn.mydomain.io/Scripts/compress/output.min.js";
bundles.Add(new ScriptBundle("~/scripts/bundle", CDN)
        .Include("~/Yourscriptfile1.js")
        .Include("~/Yourscriptfile2.js")
        .Include("~/Yourscriptfile3.js")
        );

在上面的代码中，将在发布模式下从 CDN 请求脚本。脚本的调试版本将在调试模式下在本地绘制。