Bundling And Minification Using In ASP.NET Core.

Nowadays no one like to use website which works slowly. Bundling And Minification help us to achive.

Bundling and minification are two different performance optimizer you can use for your application to improve overall performance of application.
Bundling and minification primarily improve the first page request load time. Once a web page has been requested, the browser caches the static assets (JavaScript, CSS, and images).

Bundling :

Bundling combines multiple files into a single file. Bundling reduces the number of server requests which are necessary to render a web asset, such as a web page. You can create any number of individual bundles specifically for CSS, JavaScript, etc. It ultimately reduces http request for static content.

Minification :

Minification removes unnecessary characters from code without altering functionality and also removing white space and commented code. The result is a significant size reduction in requested assets (such as CSS, images, and JavaScript files).

This article we will learn how to implement bundling and minification using BundlerMinifier. thus there are many ways to implement bundling and minification in Asp.Net Mvc Core.

Install BundlerMinifier using nuget manager.

PM> Install-Package BundlerMinifier.Core -Version 2.8.391

Once you install BundlerMinifier we need to update project.csproj file with below code.

Let us understand above code step by step.

Below code is used to define Package Reference used for bundling and minification in our application.

Below Code is used to build minified js and that we need to used as reference.

The dotnet bundle command is registered with the .NET Core CLI only when a <DotNetCliToolReference /> node is used.
This Command="dotnet bundle" will execute at time of compilation and it will build minified and bundled Js referencing bundleconfig.json file.

Configure bundling and minification :

The Asp.Net MVC Core project templates provide a bundleconfig.json configuration file which defines the options for each bundle.

[
  {
    "outputFileName": "wwwroot/css/default.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      "wwwroot/css/site.css",
   "wwwroot/css/VehicleDetail.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/default.min.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/VehicleDetail.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

outputFileName: The name of the bundle file to output. Can contain a relative path from the bundleconfig.json 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. optional, default is minify: { enabled: true }

renameLocals : this is used if you want to minified locally declared variable or you want to keep as it is. it cannot rename variable written in string format "Data" if you write in string formate and try to minify it then you minification will not happen thorw error.

sourceMap: Flag indicating whether to generate a source map for the bundled file

refer above image you can see default.min.js has been generated. we can include above generated js file on any razor page. we can also add static file depended upon environment, it can be also used for multiple environment like Development, Production etc. for more detail related to multiple environment support Click Here

I hope this will be helpful for you :)