ASP.NET Core | Bundling and minification

Bundling and minification are two distinct performance optimizations you can apply in a web app. Used together, bundling and minification improve performance by reducing the number of server requests and reducing the size of the requested static assets.

Bundling and minification primarily improve the first page request load time. Once a web page has been requested, the browser caches the static assets (JavaScript, CSS, and images). So, bundling and minification don't improve performance when requesting the same page, or pages, on the same site requesting the same assets. If the expires header isn't set correctly on the assets and if bundling and minification isn't used, the browser's freshness heuristics mark the assets stale after a few days. Additionally, the browser requires a validation request for each asset. In this case, bundling and minification provide a performance improvement even after the first page request.

Bundling

Bundling combines multiple files into a single file. Bundling reduces the number of server requests that are necessary to render a web asset, such as a web page. You can create any number of individual bundles specifically for CSS, JavaScript, etc. Fewer files mean fewer HTTP requests from the browser to the server or from the service providing your application. This results in improved first page load performance.

Minification

Minification removes unnecessary characters from code without altering functionality. The result is a significant size reduction in requested assets (such as CSS, images, and JavaScript files). Common side effects of minification include shortening variable names to one character and removing comments and unnecessary whitespace.

Consider the following JavaScript function:

JavaScript
AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Minification reduces the function to the following:

JavaScript
AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Comments

Post a Comment

Popular posts from this blog

ASP.NET Core | Change Token

A  change token  in ASP.NET Core is a general-purpose, low-level building block used to track state changes. Let me break it down for you: IChangeToken Interface : The  IChangeToken  interface propagates notifications that a change has occurred. It resides in the  Microsoft.Extensions.Primitives  namespace and is implicitly provided to ASP.NET Core apps via the  Microsoft.Extensions.Primitives  NuGet package. Key properties: ActiveChangeCallbacks : Indicates whether the token proactively raises callbacks. If set to  false , a callback is never called, and the app must poll  HasChanged  for changes. HasChanged : Receives a value that indicates if a change has occurred. Additionally, it includes the  RegisterChangeCallback(Action<Object>, Object)  method, which registers a callback invoked when the token changes 1 . ChangeToken Class : The  ChangeToken  class is static and used to propagate notifications that...
Read more

ASP.NET Core | Open Web Interface for .NET (OWIN)

Image
ASP.NET Core supports the Open Web Interface for .NET (OWIN). OWIN allows web apps to be decoupled from web servers. It defines a standard way for middleware to be used in a pipeline to handle requests and associated responses. ASP.NET Core applications and middleware can interoperate with OWIN-based applications, servers, and middleware. Running OWIN middleware in the ASP.NET pipeline ASP.NET Core’s OWIN support is deployed as part of the  Microsoft.AspNetCore.Owin  package. You can import OWIN support into your project by adding this package as a dependency in your  project.json  file: "dependencies" : { "Microsoft.AspNetCore.Server.IISIntegration" : "1.0.0" , "Microsoft.AspNetCore.Server.Kestrel" : "1.0.0" , "Microsoft.AspNetCore.Owin" : "1.0.0" }, OWIN middleware conforms to the  OWIN specification , which requires a  Func<IDictionary<string,   object>,   Task>  interface, and...
Read more

How will you improve performance of ASP.NET Core Application?

Cache aggressively Caching is discussed in several parts of this article. For more information, see  Overview of caching in ASP.NET Core . Understand hot code paths In this article, a  hot code path  is defined as a code path that is frequently called and where much of the execution time occurs. Hot code paths typically limit app scale-out and performance and are discussed in several parts of this article. Avoid blocking calls ASP.NET Core apps should be designed to process many requests simultaneously. Asynchronous APIs allow a small pool of threads to handle thousands of concurrent requests by not waiting on blocking calls. Rather than waiting on a long-running synchronous task to complete, the thread can work on another request. A common performance problem in ASP.NET Core apps is blocking calls that could be asynchronous. Many synchronous blocking calls lead to  Thread Pool starvation  and degraded response times. Do not  block asynchronous execution by...
Read more