Bundle and minify static assets in asp.net mvc core 6

Question

Hi,

I am using Asp.Net MVC Core 6 Razor View with Jquery.

I need to do Bundle and minify static assets.

I know there is an article for it

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

but I want a detail implementation or walk-through on it.

please guide and assist

thank you

Answer 1

your first step is to pick a minify and bundling tool. you have several options. once you pick one, google for examples

webpack (what I use and probably most common tool used). along with bundle and optimization supports dynamic loading, transformations.

https://webpack.js.org

glup. a dedicated build tool commonly used for javascript and css.

https://gulpjs.com

asp.net core middleware (used by some templates and many asp.net developers):

https://github.com/ligershark/WebOptimizer

note: you may also want less or sass support for your css files. all the above have plug ins for this support.

Answer 2

Although the current Microsoft document "Bundle and minify static assets in ASP.NET Core" does not include the detailed implementation, the previous one (sometime around February 2020) describes the implementation using the BuildBundlerMinifier as follows. It is still available for .NET 6.0.

(1) Add bundleconfig.json right under the project root to specify the files to bundle and minify. Example of bundleconfig.json for wwwroot/css/site.css and wwwroot/js/site.js is as follows:

[  
  {  
    "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  
  }  
]  

(2) Install the NuGet package BuildBundlerMinifier.

(3) Rebuild the project.

(4) Confirm the site.min.css and site.min.js are generated.

(5) Modify _Layout.cshtml to use the site.min.css and site.min.js:

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