Bundling And Minification In .NET CORE MVC

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.
 
Bundling and Minification in .NET CORE MVC 
Now we will add a bundleconfig.json file in our project root by adding JSON file by choosing the add new items option.
  1. [{  
  2.     "outputFileName""wwwroot/js/site.min.js",  
  3.     "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"],  
  4.     "minify": {  
  5.         "enabled"true,  
  6.         "renameLocals"true  
  7.     }  
  8. }, {  
  9.     "outputFileName""wwwroot/js/site.min.css",  
  10.     "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"],  
  11.     "minify": {  
  12.         "enabled"true,  
  13.         "renameLocals"true  
  14.     }  
  15. }]  
Bundling and Minification in .NET CORE MVC
 
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.
 
Bundling and Minification in .NET CORE MVC
 
Bundling and Minification in .NET CORE MVC
 
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.
 
Bundling and Minification in .NET CORE MVC 
 
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.
 
Bundling and Minification in .NET CORE MVC 
 
Output will be a file created like this if not please reload your project once.
 
Bundling and Minification in .NET CORE MVC
 
Add CSS and JS file to your .cshtml page or _layout page. 
  1. <script src="~/js/site.min.js" asp-append-version="true"></script>    
  2.  <link href="~/js/site.min.css" rel="stylesheet" asp-append-version="true" />    
Bundling and Minification in .NET CORE MVC
 
That's it now run your page.
 
Bundling and Minification in .NET CORE MVC 
 Bundling and Minification in .NET CORE MVC
 

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.


Next Recommended Reading Dynamic Connection String In .NET Core