Bundling And Minification In .NET CORE MVC

Easy way to integrate the application with bundling and minifications for CSS and js files.

Introduction

 

In this article, we will add bundling in our existing web application developed in .NET CORE MVC.

 

Firstly you have to add Bundler and Minifier extension in your project as show below by clicking on the extension menu. After adding an extension please restart the Visual Studio so that the extension will load.

 

 

Now we will add a bundleconfig.json file in our project root by adding JSON file by choosing the add new items option.

[{
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": ["wwwroot/lib/jquery/dist/jquery.js", "wwwroot/datatables/js/jquery.dataTables.js", "wwwroot/datatables/js/dataTables.bootstrap.js", "wwwroot/datatables/js/dataTables.bootstrap4.js", "wwwroot/datatables/js/dataTables.dataTables.js", "wwwroot/datatables/js/dataTables.foundation.js", "wwwroot/datatables/js/dataTables.jqueryui.js", "wwwroot/datatables/js/dataTables.material.js", "wwwroot/datatables/js/dataTables.semanticui.js", "wwwroot/datatables/js/dataTables.uikit.js", "wwwroot/datatables/js/datatables-buttons/js/dataTables.buttons.js", "wwwroot/datatables/js/datatables-buttons/js/buttons.colVis.js", "wwwroot/datatables/js/datatables-buttons/js/buttons.flash.js", "wwwroot/datatables/js/datatables-buttons/js/buttons.html5.js", "wwwroot/datatables/js/datatables-buttons/js/buttons.print.js"],
    "minify": {
        "enabled": true,
        "renameLocals": true
    }
}, {
    "outputFileName": "wwwroot/js/site.min.css",
    "inputFiles": ["wwwroot/datatables/css/jquery.dataTables.css", "wwwroot/datatables/css/dataTables.bootstrap.css", "wwwroot/datatables/css/dataTables.bootstrap4.css", "wwwroot/datatables/css/dataTables.foundation.css", "wwwroot/datatables/css/dataTables.jqueryui.css", "wwwroot/datatables/css/dataTables.material.css", "wwwroot/datatables/css/dataTables.semanticui.css", "wwwroot/datatables/css/dataTables.uikit.css", "wwwroot/datatables/css/buttons.dataTables.min.css"],
    "minify": {
        "enabled": true,
        "renameLocals": true
    }
}]

 

As you have observed there are many files registered here so now we will add all these files to our wwwroot folder by adding client-side library after right-clicking on wwwroot folder.

 

 

 

Datatables-buttons folder is added separately by using the same procedure. Now let's minify and make the bundle as one file by following below process shown in screen shot.

 

Open task runner explorer by right-clicking on bundleconfig.json.

 

 

 

In Task runner right-click or double click on update all files; after doing this your output file mentioned in bundleconfig,json will be created in a mentioned path as shown below.

 

 

 

Output will be a file created like this if not please reload your project once.

 

 

Add CSS and JS file to your .cshtml page or _layout page. 

<script src="~/js/site.min.js" asp-append-version="true"></script>
 <link href="~/js/site.min.css" rel="stylesheet" asp-append-version="true" />

 

That's it now run your page.

 

 

 

 

Summary

 

Bundling and Minification helps us to make our  script and CSS minified and use that in a bundle.

 

Hope this helps, and Happy Coding.