How to Implement ASP.NET Core Bundling and Minification

ASP.NET Core Bundling and Minification are two distinct techniques that can be used to improve page load performance for web applications. In ASP.NET Core bundling & minification is not available by default and needs to be implemented for a web application.

In ASP.NET Core web apps client-side resources (.js & .css files) can be bundled and minified to improve performance. Bundling and minification can be done at design time as well as at runtime. Third-party tools like Gulp & Grunt can be used for design-time bundling and minification. In design-time, minified files are created before deployment which can add complexity to the build process but reduces server load.

Bundling and minification techniques were introduced to improve page load time by not only reducing the number of requests to the server but also reducing the size of data transfer from the server to the browser.

Bundling is a technique that combines multiple files into a single file to reduce the number of requests made to the server to download files. Bundles mainly for CSS & JavaScript can be created. Fewer .css & .js files means fewer HTTP requests from browser for these files. Any number of individual bundles can be created but again these bundles also should be small in number.

Minification removes unnecessary characters, comments, spaces & new lines from code without altering core functionality. This reduces the size of mainly CSS & js files significantly. Reduced size means less amount of data to be downloaded over HTTP.

ASP.NET Core bundling and minification should be generally enabled only in the production environment and for the non-production environments used original files which makes it easier to debug.

ASP.NET Core bundling and minification implementation

Add Bundler & Minifier extension to the visual studio. This extension will add the feature to the visual studio using which you can right-click any js or CSS file in solution explorer and create a minified version of that file by selecting the option “Bundler & Minifier => Minify File”

As shown above perform this minify file to explicitly minify CSS & JS files If you don’t want to bundle and just directly use the minified version of static files.

ASP.NET Core bundling & minification support bundleconfig.json file. Shown below is the bundleconfig.json this file contains the information about what files to bundle and minify.

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

The bundleconfig.json file defines the options for each bundle

• outputFileName : The name of the bundle file to output.
• inputFiles : An array of files to bundle together. It can contain multiple files to form one bundle.
• minify : The minification options for the output type

We can add our custom application-specific CSS & js files to form one minified bundle. To create outputFileName on the build you need to right-click on bundleconfig.json file in solution explorer and select “Bundler & Minifier => enable bundle on build..”.

ASP.NET Core bundling & minification files specified in outputFileName are recommended to be used in the production environment only. You can specify which files to include in your page.

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment exclude="Development">
    <link rel="stylesheet" href="~/css/site.min.css" />
</environment>

Summary

ASP.NET Core bundling and minification is not enabled by default we need to configure this for bundling & minification of client-side resources.

Bundling and minification improves the page request load time. Bundling allows to reduce number requests per page by combining multiple client-side resource files into single file. Minification reduces size of these client-side resources to reduce number of bytes downloaded per request.

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

You can also check my other Article on ASP.NET Core Caching: https://procodeguide.com/programming/aspnet-core-caching/

Hope you found this article useful. Please support the Author