ASP.NET 4.5 Bundling and Optimization
Hello Experts,
I'm creating a web application using ASP.NET 4.5, HTML5, and CSS3. I noticed the new feature for ASP.NET 4.5 called Bundling and Optimization and I have a question on how to use it properly.
My question is do you need to reference your javascript, css, modernizer and etc.. files within the actual page itself or does the Bundingling and Optimization handle that for you?
Please see my HTML markup below. Before using ASP.NET 4.5 Bunding and Optimization I made a reference to all my css, javascript, and modernizer files below. But not sure if I need to remove those entries in my HTML markup if it's handled automatically by Bundingling and Optimization.
<!doctype html>
<!-- paulirish.com/2008/conditi
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibl
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="css/main.css">
<script src="Scripts/modernizr-2.5
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<header>
<img src="img/logo-orange.png" alt="Logo" />
<nav>
<ul>
<li><a href="index.aspx">Home</a>
<li><a href="information/index.as
<li class="no-border"><a href="contact/index.aspx">
<li class="rgt"><asp:Label ID="lblFullName" runat="server" Text="Hello, Guest" CssClass="rgtlabel"></asp:
</ul>
</nav>
</header>
<article>
<h1>Home</h1>
<p>Welcome to the Your Domain. Please use the links to the left to start the reporting process.</p>
<p>Your content will go here.</p>
<p>Thank you</p>
</article>
<section>
<h2>Start Here</h2>
<ul>
<li><a href="newuser/index.aspx">
<li><a href="application/index.as
</ul>
</section>
<footer>
<p>© 2012 Your Domain | <a href="#">Privacy Policy</a></p>
</footer>
</div>
</form>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="Scripts/jquery-1.7.2.
<script src="Scripts/jquery-ui-1.8
<!-- scripts concatenated and minified via build script -->
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
<!-- end scripts -->
</body>
</html>
I'm creating a web application using ASP.NET 4.5, HTML5, and CSS3. I noticed the new feature for ASP.NET 4.5 called Bundling and Optimization and I have a question on how to use it properly.
My question is do you need to reference your javascript, css, modernizer and etc.. files within the actual page itself or does the Bundingling and Optimization handle that for you?
Please see my HTML markup below. Before using ASP.NET 4.5 Bunding and Optimization I made a reference to all my css, javascript, and modernizer files below. But not sure if I need to remove those entries in my HTML markup if it's handled automatically by Bundingling and Optimization.
<!doctype html>
<!-- paulirish.com/2008/conditi
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibl
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="css/main.css">
<script src="Scripts/modernizr-2.5
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<header>
<img src="img/logo-orange.png" alt="Logo" />
<nav>
<ul>
<li><a href="index.aspx">Home</a>
<li><a href="information/index.as
<li class="no-border"><a href="contact/index.aspx">
<li class="rgt"><asp:Label ID="lblFullName" runat="server" Text="Hello, Guest" CssClass="rgtlabel"></asp:
</ul>
</nav>
</header>
<article>
<h1>Home</h1>
<p>Welcome to the Your Domain. Please use the links to the left to start the reporting process.</p>
<p>Your content will go here.</p>
<p>Thank you</p>
</article>
<section>
<h2>Start Here</h2>
<ul>
<li><a href="newuser/index.aspx">
<li><a href="application/index.as
</ul>
</section>
<footer>
<p>© 2012 Your Domain | <a href="#">Privacy Policy</a></p>
</footer>
</div>
</form>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="Scripts/jquery-1.7.2.
<script src="Scripts/jquery-ui-1.8
<!-- scripts concatenated and minified via build script -->
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
<!-- end scripts -->
</body>
</html>
ASKER
Hi ve3ofa,
Yes, I have seen that video.
The specific question I have is how do you add a new javascript file to a website using the bundling and optimization. Do I need to modify the packages.config file and or the BundleConfig.cs file to add the new javascript file to my web site.
Yes, I have seen that video.
The specific question I have is how do you add a new javascript file to a website using the bundling and optimization. Do I need to modify the packages.config file and or the BundleConfig.cs file to add the new javascript file to my web site.
The specific question I have is how do you add a new javascript file to a website using the bundling and optimization. Do I need to modify the packages.config file and or the BundleConfig.cs file to add the new javascript file to my web site.
no, it is supposed to check the contents of the various configured folders and update accordingly.
no, it is supposed to check the contents of the various configured folders and update accordingly.
ASKER
Ok, so If I need to add extra .css or .js files then what folder do I need to put them in?
scripts in the scripts.js folder
css in the styles.css folder
as you set it up originally for bundling and optimization
if you are replacing a file best to give it a new name
css in the styles.css folder
as you set it up originally for bundling and optimization
if you are replacing a file best to give it a new name
ASKER
Hi ve3ofa,
Ok, please see my following HTML markup below. Please notice that I have two .css files and multipe .js files at the bottom of the page that I'm referencing. Do I need to reference the .css and .js files in my markup or do I just need to put those files in the appropriate folders as you mention above?
<!doctype html>
<!-- paulirish.com/2008/conditi
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibl
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui-1.8.22
<script src="Scripts/modernizr-2.5
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<header>
<img src="img/logo-orange.png" alt="Logo" />
<nav>
<ul>
<li><a href="index.aspx">Home</a>
<li><a href="information/index.as
<li class="no-border"><a href="contact/index.aspx">
<li class="rgt"><asp:Label ID="lblFullName" runat="server" Text="Hello, Guest" CssClass="rgtlabel"></asp:
</ul>
</nav>
</header>
<article>
<h1>Home</h1>
<p>Welcome to the Reporting System. Please use the links to the left to start the reporting process.</p>
<p>Should you have any questions relative to completion of the program or its reporting requirements.</p>
</article>
<section>
<h2>Start Here</h2>
<ul>
<li><a href="newuser/index.aspx">
<li><a href="application/index.as
</ul>
</section>
<footer>
<p>© 2012 | <a href="#">Privacy Policy</a></p>
</footer>
</div>
</form>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="Scripts/jquery-1.7.2.
<script src="Scripts/jquery-ui-1.8
<!-- scripts concatenated and minified via build script -->
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
<!-- end scripts -->
</body>
</html>
Ok, please see my following HTML markup below. Please notice that I have two .css files and multipe .js files at the bottom of the page that I'm referencing. Do I need to reference the .css and .js files in my markup or do I just need to put those files in the appropriate folders as you mention above?
<!doctype html>
<!-- paulirish.com/2008/conditi
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibl
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui-1.8.22
<script src="Scripts/modernizr-2.5
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<header>
<img src="img/logo-orange.png" alt="Logo" />
<nav>
<ul>
<li><a href="index.aspx">Home</a>
<li><a href="information/index.as
<li class="no-border"><a href="contact/index.aspx">
<li class="rgt"><asp:Label ID="lblFullName" runat="server" Text="Hello, Guest" CssClass="rgtlabel"></asp:
</ul>
</nav>
</header>
<article>
<h1>Home</h1>
<p>Welcome to the Reporting System. Please use the links to the left to start the reporting process.</p>
<p>Should you have any questions relative to completion of the program or its reporting requirements.</p>
</article>
<section>
<h2>Start Here</h2>
<ul>
<li><a href="newuser/index.aspx">
<li><a href="application/index.as
</ul>
</section>
<footer>
<p>© 2012 | <a href="#">Privacy Policy</a></p>
</footer>
</div>
</form>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="Scripts/jquery-1.7.2.
<script src="Scripts/jquery-ui-1.8
<!-- scripts concatenated and minified via build script -->
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
<!-- end scripts -->
</body>
</html>
That looks correct
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
to check it out load up the webpage and use the web developer tools and check your requests
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
to check it out load up the webpage and use the web developer tools and check your requests
ASKER
Hi ve3ofa,
I guess my question now is do I still need to make those references in my HTML markup or do I just need to put the .js files in the scripts folder without referencing them in the HTML markup.
I guess my question now is do I still need to make those references in my HTML markup or do I just need to put the .js files in the scripts folder without referencing them in the HTML markup.
if you don't reference them they won't get used.
ASKER
Hi ve3ofa,
Ok, but how can I reduce the overall page load speeds if I'm loading in multiple .css and .js files? I thought it would have been 1 request for .css even if I had more than two .css files and I thought it would have been 1 request for .js files even though I have 10 .js files.
Ok, but how can I reduce the overall page load speeds if I'm loading in multiple .css and .js files? I thought it would have been 1 request for .css even if I had more than two .css files and I thought it would have been 1 request for .js files even though I have 10 .js files.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi ve3ofa,
Ok, please bare with me. I'm attaching my HTML markup for my main page. Based on what you posted for post ID: 38326968 can you make the changes that I need assuming all .css is in a directory called css and all .js files are in a directory called Scripts.
I'm just a little confused on how the application knows which .js file and or which .css file to load when I execute my pages. As you can see now I'm referencing the actual .css and .js files that i need to use but not sure how the page knows which files to use if I use your method above.
Thanks in advance!!!
HTML Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!doctype html>
<!-- paulirish.com/2008/conditi
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibl
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="css/main.css">
<script src="Scripts/modernizr-2.5
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<header>
<img src="img/logo-orange.png" alt="Logo" />
<nav>
<ul>
<li><a href="index.aspx">Home</a>
<li><a href="information/index.as
<li class="no-border"><a href="contact/index.aspx">
<li class="rgt"><asp:Label ID="lblFullNameSession" runat="server" CssClass="rgtlabel"></asp:
</ul>
</nav>
</header>
<article>
<h1>Home</h1>
<p>Welcome to the Reporting System. Please use the links to the left to start the reporting process.</p>
<p>Thank you,</p>
</article>
<section>
<h2>Start Here</h2>
<ul>
<li><a href="newuser/index.aspx">
<li><a href="application/index.as
</ul>
</section>
<footer>
<p><a href="#">Privacy Policy</a></p>
</footer>
</div>
</form>
<!-- JavaScript at the bottom for fast page loading -->
<script src="Scripts/jquery-1.7.2.
<!-- scripts concatenated and minified via build script -->
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
<!-- end scripts -->
</body>
</html>
Ok, please bare with me. I'm attaching my HTML markup for my main page. Based on what you posted for post ID: 38326968 can you make the changes that I need assuming all .css is in a directory called css and all .js files are in a directory called Scripts.
I'm just a little confused on how the application knows which .js file and or which .css file to load when I execute my pages. As you can see now I'm referencing the actual .css and .js files that i need to use but not sure how the page knows which files to use if I use your method above.
Thanks in advance!!!
HTML Markup:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!doctype html>
<!-- paulirish.com/2008/conditi
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibl
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="css/main.css">
<script src="Scripts/modernizr-2.5
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<header>
<img src="img/logo-orange.png" alt="Logo" />
<nav>
<ul>
<li><a href="index.aspx">Home</a>
<li><a href="information/index.as
<li class="no-border"><a href="contact/index.aspx">
<li class="rgt"><asp:Label ID="lblFullNameSession" runat="server" CssClass="rgtlabel"></asp:
</ul>
</nav>
</header>
<article>
<h1>Home</h1>
<p>Welcome to the Reporting System. Please use the links to the left to start the reporting process.</p>
<p>Thank you,</p>
</article>
<section>
<h2>Start Here</h2>
<ul>
<li><a href="newuser/index.aspx">
<li><a href="application/index.as
</ul>
</section>
<footer>
<p><a href="#">Privacy Policy</a></p>
</footer>
</div>
</form>
<!-- JavaScript at the bottom for fast page loading -->
<script src="Scripts/jquery-1.7.2.
<!-- scripts concatenated and minified via build script -->
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
<!-- end scripts -->
</body>
</html>
ASKER
@ve3ofa
Are you still able to assist?
Are you still able to assist?
it just does it by adding the references for you.
ASKER
Hi ve3ofa,
I guess I'm confused on how to make a reference in my HTML markup to Modernizer, multiple css files with different names, and multiple .js files with different names. I obvioslly can't use anything like the following below.
What I was using for .js files:
<script src="Scripts/jquery-1.7.2.
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
What can I change it to now assuming those .js files are in the Scripts folder:
What I was using for .css files:
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jquery-ui-
What can I change it to now assuming those .css files are in a folder named css:
I guess I'm confused on how to make a reference in my HTML markup to Modernizer, multiple css files with different names, and multiple .js files with different names. I obvioslly can't use anything like the following below.
What I was using for .js files:
<script src="Scripts/jquery-1.7.2.
<script src="Scripts/plugins.js"><
<script src="Scripts/script.js"></
What can I change it to now assuming those .js files are in the Scripts folder:
What I was using for .css files:
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jquery-ui-
What can I change it to now assuming those .css files are in a folder named css:
ASKER
Also, do I need to make a reference anywhere in the budle.config, package.config files?
ASKER
See my bundle.config code below:
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
public static void RegisterBundles(BundleCollection bundles)
{
// remove if error occurs
BundleTable.EnableOptimizations = true;
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
// Use the Development version of Modernizr to develop with and learn from. Then, when you’re
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
}
}ASKER
<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
<styleBundle path="~/Content/css">
<include path="~/Content/Site.css" />
</styleBundle>
<styleBundle path="~/Content/themes/base/css">
<include path="~/Content/themes/base/jquery.ui.core.css" />
<include path="~/Content/themes/base/jquery.ui.resizable.css" />
<include path="~/Content/themes/base/jquery.ui.selectable.css" />
<include path="~/Content/themes/base/jquery.ui.accordion.css" />
<include path="~/Content/themes/base/jquery.ui.autocomplete.css" />
<include path="~/Content/themes/base/jquery.ui.button.css" />
<include path="~/Content/themes/base/jquery.ui.dialog.css" />
<include path="~/Content/themes/base/jquery.ui.slider.css" />
<include path="~/Content/themes/base/jquery.ui.tabs.css" />
<include path="~/Content/themes/base/jquery.ui.datepicker.css" />
<include path="~/Content/themes/base/jquery.ui.progressbar.css" />
<include path="~/Content/themes/base/jquery.ui.theme.css" />
</styleBundle>
</bundles>ASKER
Below is my packages.config file.
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="AspNet.ScriptManager.jQuery" version="1.7.1" targetFramework="net45" />
<package id="AspNet.ScriptManager.jQuery.UI.Combined" version="1.8.20" targetFramework="net45" />
<package id="DotNetOpenAuth.AspNet" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.Core" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OAuth.Consumer" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OAuth.Core" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OpenId.Core" version="4.0.3.12153" targetFramework="net45" />
<package id="DotNetOpenAuth.OpenId.RelyingParty" version="4.0.3.12153" targetFramework="net45" />
<package id="EntityFramework" version="5.0.0" targetFramework="net45" />
<!--<package id="jQuery" version="1.7.1.1" targetFramework="net45" />-->
<package id="jQuery" version="1.7.2" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.8.20.1" targetFramework="net45" />
<package id="Microsoft.AspNet.Membership.OpenAuth" version="1.0.0" targetFramework="net45" />
<package id="Microsoft.AspNet.Providers.Core" version="1.1" targetFramework="net45" />
<package id="Microsoft.AspNet.Providers.LocalDB" version="1.1" targetFramework="net45" />
<package id="Microsoft.AspNet.ScriptManager.MSAjax" version="4.5.6" targetFramework="net45" />
<package id="Microsoft.AspNet.ScriptManager.WebForms" version="4.5.6" targetFramework="net45" />
<package id="Microsoft.AspNet.Web.Optimization" version="1.0.0" targetFramework="net45" />
<package id="Microsoft.AspNet.Web.Optimization.WebForms" version="1.0.0" targetFramework="net45" />
<package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net45" />
<package id="Modernizr" version="2.5.3" targetFramework="net45" />
<package id="WebGrease" version="1.1.0" targetFramework="net45" />
</packages>
and what specific questions do you have?