This is a pretty neat way to bundle and optimize your CSS and Javascript files within your ASP.NET application.
- Install the nuget package
Microsoft ASP.NET Web Optimization Framework - Add a new class inside the App_Start folder >
BundleConfig.cs - Register/group your CSS and JS files the way you want it
public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/bundles/abovethefoldcss").Include( "~/Content/css/somecss.css", "~/Content/css/anothercss.css")); bundles.Add(new StyleBundle("~/bundles/belowthefoldcss").Include( "~/Content/css/bootstrap.css", "~/Content/css/font-awesome.css")); bundles.Add(new ScriptBundle("~/bundles/js").Include( "~/Scripts/js/jquery.js", "~/Scripts/js/bootstrap.js")); } } - Call your RegisterBundles method from the Global.asax.cs
void Application_Start(object sender, EventArgs e) { BundleConfig.RegisterBundles(BundleTable.Bundles); } - Render your bundles inside your view
<!DOCTYPE html> <html lang="en"> <head> @Styles.Render("~/bundles/abovethefoldcss") </head> <body> @Styles.Render("~/bundles/belowthefoldcss") @Scripts.Render("~/bundles/js") </body> <html>
Please note if you are running on debug mode, it will load the files separately. Bundling and minification occurs for when compilation is on release mode.