Bundling and Minification of AWS CloundFront CDN files using ASP.NET MVC?

问题

Bundling: It’s a simple logical group of files that could be referenced by unique name and being loaded with on HTTP requestor.

Minification: It’s process of removing unnecessary whitespace, line breaks, and comments from code to reduce its size thereby improving load times.

Here is my idea,

Basically I use multiple CCS, JS, and Image files for modularity, readability and maintainability of the code. Here multiple JS and CSS files require multiple HTTP requests from the browser leads to degrade the performance and load time of my web page, in some cases it leads to degradation of the overall performance of the website.

I would like to store my all static content into AWS S3 and serve them by CloudFront distribution links and use those CDN paths to my multiple projects with bundling & minification.

I have been trying to bundle all JS files from CDN into a single bundle (for Bundling & Minication) Like below code but this doesn’t work!

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"
               ));

Also tried below code,but this doesn’t work!

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"
       ));

Any help will be appreciated.

回答1:

I am answering to my own question because it may be help full to someone.

I have generated compressed and minified version of the JS and CSS files using ASP.Net MVC Bundle Config. We can’t combine multiple CDN’s together (one script only) in bundle config.

I have performed the following steps to generate compressed and minified JS & CSS files,

a. Include necessary JS files in bundle config with the script bundle virtual path (“~/scripts/bundle”) and check web page is loaded with no errors in the browser.

BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;

bundles.Add(new ScriptBundle("~/scripts/bundle")
       .Include("~/Yourscriptfile1.js")
       .Include("~/Yourscriptfile2.js")
       .Include("~/Yourscriptfile3.js")
        );

b. To compress and minify all those JS files into one file, Send HTTP request to virtual path (http://localhost:254/scripts/bundle) from your local machine browser and save response into “output.min.js” file.

c. Upload “output.min.js” file into S3 bucket and set this object public read-only property, add expire header with far-future expiration date, and configure S3 bucket as a CDN.

Key=”Cache-Control”, Value=”max-age=1814400” - [3 weeks] Key=”Expires”, Value=”Thu, 30 Dec 2021 16:00:00 GMT” - [far-future expiration date only]

d. Now configure your CDN in bundle config file by changing the above code (Step-a) into below code,

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")
        );

In the above code, Scripts will be requested from the CDN while in release mode. The debug version of the script will be drawn locally in debug mode.

来源：https://stackoverflow.com/questions/35768152/bundling-and-minification-of-aws-cloundfront-cdn-files-using-asp-net-mvc