![]() Minification is a technique for removing unnecessary characters (like white spaces, newlines, and tabs) and comments from the JavaScript and CSS files to reduce the size which causes improved load times of a webpage. ![]() Now run your application and you can see that all the JS and CSS files are converted to single JS and CSS files as shown below: The following lines of code within ‘Application_Start’ event of Global.asax enables bundling and minification, and in the Web.config file it overrides respective settings.īundleConfig.RegisterBundles(BundleTable.Bundles) You can also override the Web.config setting with the ‘EnableOptimizations’ property on the ‘BundleTable’ class. You can add reference for created bundles in the project’s view pages and layouts as Bundling and Minification in debug modeīundling and minification doesn’t work in debug mode, so to enable bundling and minification, set the debug value in Web.config file to “false”. You will now need to register above created bundles with in ‘Application Start’ event of Global.asax as below: It automatically selects the full version for debug configurations and the “.min” version for release builds.It allows to use NuGet to update to a latest jQuery version without changing the preceding bundling code or jQuery references in your view pages.In the above example, following benefits are provided by using wild card: The preceding code creates a new JavaScript bundle named ~/bundles/jquery that includes debug and minified files in the ‘Scripts’ folder that compares the wild card string “~/Scripts/jquery- wild card shown above is used to automatically create a jQuery bundle with the appropriate version of jQuery in your ‘Scripts’ folder. You can also add your own custom JS and CSS files with complete path using ‘Include’ method. Here, I have created the bundle for all required JS and CSS files. These DLLs can be downloaded from Internet or using NuGet Package Manager.Īfter adding required DLL references, now create the bundle for your JS and CSS files within the Global.asax file as shown below. Lesser files mean lesser HTTP requests which in turn improves the initial page load performance.įirst of all, add the references for both WebGrease.dll and to your projects as shown below. ![]() It can create bundles for JavaScript, CSS, etc. This request was queued for 187 milliseconds waiting for another request to complete.īundling makes it easy to combine multiple files into a single file. In the preceding image, ‘Start’ event shows the time that a request was queued because of the browser limit of only six simultaneous connections. For example, the following image shows the load time details of the file. You can get detailed timing information by double-clicking on an asset. The blue bars represent the time taken to receive the response data from the server.The yellow bars show the request time taken to send the request and receive the first response from the server.The brown bars show the time for which the request is queued by the browser waiting for the six connections to complete.In the below image, the IE developer tool network tab shows the timings for assets required by the ‘Index view’ of a sample application. This means that while six requests are being executed, any additional requests for assets on a host will be queued in the browser. Most of the current major browsers limit the number of simultaneous connections to six per hostname. Scenario without Bundling and Minification It’s a process of removing unnecessary whitespaces, line breaks and comments from code to reduce its size, thereby improving load times.īundling and minification are the performance optimization techniques that can help to improve load time by reducing the number of requests to the server and reducing the size of requested assets (such as JavaScript and CSS.) You can create bundle for JavaScript and CSS. Before getting you into the details of performance optimization, let me give a brief note on Bundling and Minification of JS/CSS files.īundle is simply logical group of files that could be referenced by unique name and loaded with one HTTP request.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |