Introduction

Bundling and minification are two main features that you can use in ASP.NET Core to improve page load performance for your ASP.NET Core web application.

• The bundling concept is used to combines multiple files into a single file. We can bundle multiple CSS and JS files into one file which means if you reduce files then the number of HTTP requests also reduced so it improves page load performance for your ASP.NET Core web application.
• The minification is used to optimize the JS scripts and CSS code that will remove the unwanted comments, white spaces, and line breaks, which reduced the file size and improve the website performance.

How to enable bundling and minification in ASP.NET Core?

We can easily do the bundling and minification in ASP.NET Core applications by enabling the "Bundler & Minifier" extension. Bundler & Minifier is a built-in tool that is available for Visual Studio 2017 and 2019 versions. In this blog, we will see how to do the bundling and minification in ASP.NET Core applications.

Step 1:

Open your Visual Studio 2017 or 2019 and go to "Extensions" then click the "Manage Extensions" option.

Step 2:

The below popup will appear. In search type the word "Bundler & Minifier". You will see the available extensions as shown below, Choose "Bundler & Minifier" and click download to install the extension.

Step 3:

Once the extension is downloaded, Visual Studio requested you to close all the visual studio instances to install the extension. The popup will appear and you can follow the on-screen instruction to install the extension.

Step 4:

Open your ASP.NET Core web application after the extension installation. Open the wwwroot folder, select the CSS file which you want to be minified, then right-click and choose Bundler & Minifier. Then from the popup click the "minify file" option.

It will generate the minified file with the same name under the same folder and also generates a bundleconfig.json file in your project.

Bundleconfig.json:

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

The bundleconfig.json file is a standard JSON file that holds the bundled filenames. The "inputFiles" is an array of files that will be minified and stored in "outputFileName".

• outputFileName: The name of the bundle file to output. These are relative paths to the configuration file. 
• inputFiles: An array of files to bundle together. These are relative paths to the configuration file. 
• minify: The minification options for the output type.
• includeInProject: This Flag indicating whether to add generated files to the project file. 
• sourceMap: This Flag indicating whether to generate a source map for the bundled file.
• sourceMapRootPath: The root path for storing the generated source map file.

Instead of minifying each file every time by right-clicking files (CSS or JS), there is an option to bundle all the files on the build. To enable this option, Right click  bundleconfig.json file then Select "Bundler & Minifies" and then "Enable bundle on build".

After clicking the 'Enable bundle on build' menu then Visual Studio will automatically download and install an additional NuGet package if it is not already installed.

If you want to minify all the CSS files under the folder wwwroot, then mention the input files like this "inputFiles": [ "wwwroot/**/!(*.min).css" ]. You can also do the same procedure for JS files as well.

[
  {
    "outputFileName": "wwwroot/css/style.min.css",
    "inputFiles": [ "wwwroot/**/!(*.min).css" ]
  }
]