Bundling and Minification in ASP.NET

-
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.

Let’s say you wanted to reference all of the stylesheets in the “Styles” folder above on a page.  Today you’d have to add multiple CSS references to get all of them – which would translate into 6 separate HTTP requests

The new bundling/minification feature now allows you to instead bundle and minify all of the .css files in the Styles folder – simply by sending a URL request to the folder (in this case “styles”) with an appended “/css” path after it.
This will cause ASP.NET to scan the directory, bundle and minify the .css files within it, and send back a single HTTP response with all of the CSS content to the browser.

ASP.NET come up with bundling  and minfication to optimize all the Script/Style files.  so, before we use this feature in web application/MVC application development we have to install the relevant libraries using Package Console at VS IDES


Install-Package Microsoft-Asp.Net.Web.Optimization


After installing Optimization packages, need to specify the to be optimized files at global.asax.cs file like below

 System.Web.Optimization.BundleTable.Bundles.Add(new   System.Web.Optimization.ScriptBundle("~/bundle/js")
              .Include("~/scripts/*.js"));    // to bundle and optimize the script files

  System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.StyleBundle("~/bundle/css").Include("~/Styles/*.css")); // to bundle and optimize the styles

Comments

Post a Comment

Popular posts from this blog

Email Sending through O365 using OAuth Protocol

-
  Microsoft Office365 EWS servers have been extended to support authorization via the industry-standard OAuth 2.0 protocol. Using OAUTH protocol, user can do authentication by Microsoft Web OAuth instead of inputting user and password directly in application Microsoft / Office 365 OAuth + EWS We can use the OAuth authentication service provided by Azure Active Directory to enable our application to connect with IMAP, POP or SMTP protocols to access Exchange Online in Office 365. To use OAuth with our application we need to register application on Azure Active directory and other steps also we need to do to get the access token back. Below are the steps   To use Microsoft/Office365 OAUTH in your application, you must create an application in  https://portal.azure.com . Sign into the Azure portal using either a work or school account or a personal Microsoft account. If your account gives you access to more than one tenant, select your account in the top ...
Read more

IoT Technology

-
Image
IoT technology The Internet of Things (IoT) is a system of interrelated computing devices, mechanical and digital machines.  IoT is a network of sensors where data is exchanged, using different connectivity protocols, with systems. This set up can be leveraged to create a new business application or to enhance an existing process. The exchange of the data can be bi-directional between sensors and systems Examples of sensors can be temperature sensors, motion sensors, flow meters, heart meter monitors, biometric devices, smoke detectors, & etc Examples of connectivity can be wifi, radio, GPRS, GSM, LAN, WAN, & etc. Examples of systems can be a remote health monitoring applications, SCADA applications, etc Look at next slide about the complete flow of IoT process Examples A doctor in US would like to monitor the heart rate and ECG of a patient in Hyderabad. This is done with the patient having sensors attached to him that collect the ECG data and the hea...
Read more

What is reverse proxy?

-
Image
  What is a reverse proxy? A reverse proxy is a server that sits in front of web servers and forwards client (e.g. web browser) requests to those web servers. Reverse proxies are typically implemented to help increase  security ,  performance , and reliability . In order to better understand how a reverse proxy works and the benefits it can provide, let’s first define what a proxy server is. What’s a proxy server? A forward proxy, often called a proxy, proxy server, or web proxy, is a server that sits in front of a group of client machines. When those computers make requests to sites and services on the Internet, the proxy server intercepts those requests and then communicates with web servers on behalf of those clients, like a middleman. For example, let’s name 3 computers involved in a typical forward proxy communication: A: This is a user’s home computer B: This is a forward proxy server C: This is a website’s origin server (where the website data is stored) In a stand...
Read more