Basics of Bundling and Minification
As more and more people use mobile devices to surf the web, it is
becoming increasingly important that the websites and apps we build perform well with
them. We’ve all tried loading sites on our smartphones – only to eventually give up in
frustration as it loads slowly over a slow cellular network. If your
site/app loads slowly like that, you are likely losing potential customers
because of bad performance. Even with powerful desktop machines, the load
time of your site and perceived performance can make an enormous customer
perception.
Most websites today are made up of multiple JavaScript and CSS
files to separate the concerns and keep the code base tight. While this is a
good practice from a coding point of view, it often has some unfortunate
consequences for the overall performance of the website. Multiple
JavaScript and CSS files require multiple HTTP requests from a browser – which
in turn can slow down the performance load time.
I have placed following line of code in design
<script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="scripts/all.js" type="text/javascript"></script>
<script src="scripts/references.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.2-vsdoc.js" type="text/javascript"></script>
<script src="scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="scripts/modernizr-2.0.6-development-only.js" type="text/javascript">
Below I’ve opened a local
website in IE9 and recorded the network traffic using IE’s built-in F12
developer tools. Each
file is currently requested separately by the browser and returned by the
server, and the process can take a significant amount of time proportional to
the number of files in question.
Bundling
ASP.NET is adding a feature that
makes it easy to “bundle” or “combine” multiple CSS and JavaScript files into
fewer HTTP requests. This causes the browser to request a lot fewer files and
in turn reduces the time it takes to fetch them
Minification
The next release of ASP.NET is
also adding a new feature that makes it easy to reduce or “minify” the download
size of the content as well. This is a process that removes whitespace,
comments and other unneeded characters from both CSS and JavaScript. The result
is smaller files, which will download and load in a browser faster.
Simply replace the lines of code with
<script src="scripts/js" type="text/javascript"></script>
Remember js – indicates
the extension of files that needs to be bundled and minified
Look at the result
Any number of directories/sub-directories supported
In the example above we just had
a single “Scripts” and “Styles” folder for our application. This works
for some application types (e.g. single page applications). Often,
though, you’ll want to have multiple CSS/JS bundles within your application –
for example: a “common” bundle that has core JS and CSS files that all pages
use, and then page specific or section specific files that are not used
globally.
You can use the
bundling/minification support across any number of directories or
sub-directories in your project – this makes it easy to structure your code so
as to maximize the bunding/minification benefits. Each directory by default
can be accessed as a separate URL addressable bundle.
There
is BundleConfig.cs defined under /App_Start folder. We can define our custom
scripts/style there .
Simply
add
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js"))
OR
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css"))
After this reference the same in design page like
<script src="/bundles/WebFormsJs"></script>
Reference
No comments:
Post a Comment