Bundling and Minification in .NET Core Web Application

Bundling and Minification is used to improve the Speed of the web application, Bundling means to bundle all required multiple JS files into one JS file and also bundle required CSS files into one CSS file, Minification means reduce the size of the file by deleting Extra Space (such as White Space, New Line), in .NET Core it is now become easier to implement Bundling and Minification, we will just follow below steps to add Bundling and Minifcation in .NET Core Web Application:

Step 1: Create .NET Core Web application using .NET CLI or using Visual Studio Editor as shown below, here in this example we have created .NET Core MVC application:

dotnet new mvc -o BundlingMinificationNetCoreApp

Step 2:  Right click on the Solution and add new NuGet Package: "BuildBundlerMinifier" as shown below:

OR

Add using .NET CLI Command:

dotnet add package BuildBundlerMinifier --version 3.2.449

OR

Add using Package Manager:

Install-Package BuildBundlerMinifier -Version 3.2.449

Step 3: Now, Right click on the Solution and Add New file and name it as ("bundleconfig.json") and add the below content to it:

1. [
2.   {
3.     "outputFileName": "wwwroot/css/site.min.css",
4.     "inputFiles": [
5.       "wwwroot/css/common.css"
6.     ]
7.   },
8.   {
9.     "outputFileName": "wwwroot/js/site.min.js",
10.     "inputFiles": [
11.       "wwwroot/js/common.js",
12.       "wwwroot/js/user.js"
13.     ]
14.   }
15. ]  

As we can see above, we have created two bundles,

1. One bundle is for CSS, which we have named it as "site.min.css" as an output file and have included "common.css" as an input file. This will create site.min.css file in the css folder and add the contents of common.css file into it and minify it by reducing the extra space and extra lines.

2. One bundle is for JavaScript, we have named an output file as "site.min.js" and included "common.js" and "user.js" files into this bundle file("site.min.js"), this will add both the files contents into "site.min.js" file and it will be minified file.

Step 4: Now, we can modify Layout.cshtml file as shown below:

Modify:
 <link rel="stylesheet" href="~/css/site.css" />
To:
 <link rel="stylesheet" href="~/css/site.min.css" />

Modify:
  <script src="~/js/site.js" asp-append-version="true"></script>
To:
  <script src="~/js/site.min.js" asp-append-version="true"></script>

We have now modified the file names to minified (site.min.css & site.min.js) files in Layout.cshtml page.

Step 5: Now, we can run the project and see the JS and CSS files are getting loaded correctly:

We can see, the bundled & minified JS and CSS files loaded correctly as we mentioned in bundleconfig.json file, After implementing Bundling and Minification and running the project, out project structure looks like below:
After running the project, it automatically created, site.min.css and site.min.js files and added required contents as mentioned in bundleconfig.json file. You can try this implementation of Bundling & Minification in your .NET Core Web project.