ASP.NET Core  

A Step-by-Step Guide to Bundling and Minification in ASP.NET Core

Bundling and minification are crucial for improving the performance of web applications. They reduce the number of HTTP requests and the size of CSS and JavaScript files, resulting in faster load times. ASP.NET Core supports these optimizations, but the approach differs from that in older ASP.NET MVC.

In this guide, we’ll walk through setting up bundling and minification in ASP.NET Core, step by step, with examples.

Step 1: Understanding Bundling and Minification

  • Bundling: Combines multiple CSS or JS files into a single file to reduce HTTP requests.

  • Minification: Removes unnecessary characters (spaces, comments, and newlines) from CSS and JS files to reduce file size.

Why it matters: Fewer requests + smaller files = faster page load = better user experience.

Step 2: Choose a Bundling and Minification Tool

ASP.NET Core does not include built-in bundling and minification like the old System.Web.Optimization. Instead, you can use tools such as:

  1. LibMan + BuildBundlerMinifier

  2. Gulp

  3. Webpack

For simplicity, we’ll use BuildBundlerMinifier, which integrates easily with Visual Studio.

Step 3: Install BuildBundlerMinifier

  1. Open your ASP.NET Core project in Visual Studio.

  2. Right-click the project → Manage NuGet Packages → search for:

BuildBundlerMinifier

  1. Install it.

This adds support for .json configuration files for bundling and minification.

Step 4: Create bundleconfig.json

  1. Right-click the project → Add → New Item → JSON File → name it bundleconfig.json.

  2. Define your bundles. For example:

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

Explanation:

  • outputFileName → The resulting bundled & minified file.

  • inputFiles → List of files to include in the bundle.

  • minify.enabled → True to minify the output.

Step 5: Build the Bundles

After saving bundleconfig.json:

  • Right-click the project → Bundler & Minifier → Update all bundles.

  • This generates the .min.css and .min.js files in wwwroot.

Tip: You can also configure Visual Studio to automatically update bundles on build.

Step 6: Reference Bundled Files in _Layout.cshtml

Instead of referencing individual files:

<!-- Before -->
<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />

<script src="~/js/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/site.js"></script>

Use the minified bundle:

<!-- After -->
<link rel="stylesheet" href="~/css/site.min.css" />
<script src="~/js/site.min.js"></script>

This reduces HTTP requests and improves page performance.

Step 7: Automate Bundling in Production

You can ensure bundling and minification only happen in production by using environment checks:

@if (!Environment.IsDevelopment())
{
    <link rel="stylesheet" href="~/css/site.min.css" />
    <script src="~/js/site.min.js"></script>
}
else
{
    <link rel="stylesheet" href="~/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="~/js/jquery.js"></script>
    <script src="~/js/bootstrap.js"></script>
    <script src="~/js/site.js"></script>
}

Step 8: Verify the Result

  1. Run the application.

  2. Open browser dev tools → Network tab.

  3. Verify that only the minified CSS and JS bundles are loaded.

  4. Check the file sizes—they should be smaller than the original files.

Step 9: Advanced Tips

  • Versioning: Use query strings or hashed filenames to prevent browser caching issues:

<link rel="stylesheet" href="~/css/[email protected]" />

  • Third-party libraries: Used LibMan to fetch libraries like jQuery and Bootstrap.

  • Gulp/webpack integration: For large projects, consider Gulp or Webpack for more advanced optimization like tree-shaking.

✅ Conclusion

Bundling and minification in ASP.NET Core is no longer built-in but is easy to implement with tools like BuildBundlerMinifier. By combining CSS and JS files and minifying them, you can dramatically improve page load speed, reduce bandwidth usage, and enhance the user experience.

Membership not found