Pro Code Guide

Developer’s Guide To Programming

HOME    CONTACT   ABOUT

How to Implement ASP.NET Core Bundling and Minification

Updated Feb 2, 2021 | 0 comments

ASP.NET Core Bundling and Minification are two distinct techniques that can be used to improve page load performance for web applications. In ASP.NET Core bundling & minification is not available by default and needs to be implemented for a web application.

In ASP.NET Core web apps client-side resources (.js & .css files) can be bundled and minified to improve performance. Bundling and minification can be done at design time as well as at runtime. Third-party tools like Gulp & Grunt can be used for design-time bundling and minification. In design-time, minified files are created before deployment which can add complexity to the build process but reduces server load.

Bundling and minification techniques were introduced to improve page load time by not only reducing the number of requests to the server but also reducing the size of data transfer from the server to the browser.

asp.net core bundling and minification

Bundling is a technique that combines multiple files into a single file to reduce the number of requests made to the server to download files. Bundles mainly for CSS & JavaScript can be created. Fewer .css & .js files means fewer HTTP requests from browser for these files. Any number of individual bundles can be created but again these bundles also should be small in number.

Minification removes unnecessary characters, comments, spaces & new lines from code without altering core functionality. This reduces the size of mainly CSS & js files significantly. Reduced size means less amount of data to be downloaded over HTTP.

ASP.NET Core bundling and minification should be generally enabled only in the production environment and for the non-production environments used original files which makes it easier to debug.

Newsletter Subscription

Stay updated! Instantly get notified about my new articles in your mailbox by subscribing via email

ASP.NET Core 5 Design Patterns: Thinking code using architectural principles, testing, design patterns, and C

ASP.NET Core bundling and minification implementation

Add Bundler & Minifier extension to the visual studio. This extension will add the feature to the visual studio using which you can right-click any js or CSS file in solution explorer and create a minified version of that file by selecting the option “Bundler & Minifier => Minify File”

Bundler And Minifier
Minify File

As shown above perform this minify file to explicitly minify CSS & JS files If you don’t want to bundle and just directly use the minified version of static files.

ASP.NET Core bundling & minification support bundleconfig.json file. Shown below is the bundleconfig.json this file contains the information about what files to bundle and minify.

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

The bundleconfig.json file defines the options for each bundle

  • outputFileName : The name of the bundle file to output.
  • inputFiles : An array of files to bundle together. It can contain multiple files to form one bundle.
  • minify : The minification options for the output type

We can add our custom application-specific CSS & js files to form one minified bundle. To create outputFileName on the build you need to right-click on bundleconfig.json file in solution explorer and select “Bundler & Minifier => enable bundle on build..”.

Enable bundle on build

ASP.NET Core bundling & minification files specified in outputFileName are recommended to be used in the production environment only. You can specify which files to include in your page.

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment exclude="Development">
    <link rel="stylesheet" href="~/css/site.min.css" />
</environment>

Summary

ASP.NET Core bundling and minification is not enabled by default we need to configure this for bundling & minification of client-side resources.

Bundling and minification improves the page request load time. Bundling allows to reduce number requests per page by combining multiple client-side resource files into single file. Minification reduces size of these client-side resources to reduce number of bytes downloaded per request.

References: https://docs.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-3.1

You can also check my other Article on ASP.NET Core Caching: https://procodeguide.com/programming/aspnet-core-caching/

Hope you found this article useful. Your support is appreciated!
Buy me a coffeeBuy me a coffee
Home 9 Programming 9 How to Implement ASP.NET Core Bundling and Minification

Set start URL in ASP.NET Core – Quick & Easy ways

This article will cover the ways to set start URL in ASP.NET Core 5 applications i.e. change the default URL (http://localhost:5000) in ASP.NET Core applications. When you create any new ASP.NET Core application whether its MVC App or Web API and run it then it will...

Hangfire in ASP.NET Core – Easy way to Schedule Background Jobs

This article covers detail about how to integrate Hangfire in ASP.NET Core applications which is an easy way to schedule background jobs in .NET Core and .NET based applications. Background jobs or tasks allow the programmers to execute code on a different thread but...

How to Send Emails in ASP.NET Core – Quick & Easy Guide

These days sending emails like user email id confirmation, OTP emails, acknowledgments, etc. is a very common requirement of any application. In this article, we will see a demo about how to send emails in ASP.NET Core in quick & easy steps. We will create an...

ML.NET – Machine Learning with .NET Core – Beginner’s Guide

This article will get you started with the fundamentals of Machine Learning and how to get started with Machine Learning with .NET Core i.e. ML.NET. We will even learn different concepts of Machine learning with a brief overview. Introduction to Machine Learning...

Implement Cookie Authentication in ASP.NET Core – Detailed Guide

This article will get you started with implementing cookie authentication in ASP.NET Core applications. Cookie authentication allows you to have your own login/register screens & custom logic for user-id/password validation without the need to use ASP.NET Core...

ASP.NET Core Identity Roles based Authorization

This article will get you started with what are ASP.NET Core Identity roles and the need for roles, how to enable ASP.NET Core Identity roles in MVC Application, and how to implement role-based authorization. Role-based authorization is for basic authorization where...

Dependency Injection in ASP.NET Core 3.1 – Beginner’s Guide

This article will cover in details dependency injection in ASP.NET Core 3.1. ASP.NET Core is designed from the ground up to support the dependency injection design pattern. Dependency injection in ASP.NET Core provides a technique to create applications that are...

Real-time Web Applications with SignalR in ASP.NET Core 3.1

In this article, we will learn about real-time web & how to build real-time web applications using SignalR in ASP.NET Core. As part of this article, we will work on an application that can send real-time messages/alerts to all connected users or private messages...

Code Profiling using MiniProfiler in ASP.NET Core 3.1

This article will get you started with how to enable miniprofiler in ASP.NET Core to measure the performance of your application. MiniProlifer helps you understand how your application is performing by allowing you to profile any part of code in ASP.NET Core...

Microservices with ASP.NET Core 3.1

Microservices is a type of Architecture in which application is created as multiple small independent serviceable components. This article will cover in detail how to create microservices with ASP.NET Core, Serilog, Swagger UI, Health Checks & Docker containers....

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *