Bundling and Minification in ASP.NET Core Using WebOptimizer

Bundling and Minification in ASP.NET Core Using WebOptimizer

In this article, I will discuss Bundling and Minification in ASP.NET Core Using WebOptimizer with Examples. Please read our previous article discussing Bundling and Minification in ASP.NET Core MVC with Examples.

Example to Understand Bundling and Minification using WebOptimizer:

First, create an ASP.NET Core Web Application using the Model View Controller Project template. Once you create the project, then please add a few CSS and JavaScript files within css and js folder of your wwwroot folder, as shown in the below image:

Example to Understand Bundling and Minification using WebOptimizer

Now, let us add some dummy content to the above CSS and JS files. Don’t go with the content; just copy and paste the same with the respective files. This is just for the demo purpose.

StyleSheet1.css:
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
StyleSheet2.css
/* Section styles */
section {
    padding: 20px;
    margin: 20px 0;
}

/* Classes for buttons */
.btn {
    display: inline-block;
    background: #555;
    color: #fff;
    padding: 10px 15px;
    margin: 5px 0;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}
JavaScript1.js
// Toggle visibility of an element
function toggleVisibility(elementId) {
    var element = document.getElementById(elementId);
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}
JavaScript2.js
// Event listener for a button click
document.getElementById('testButton').addEventListener('click', function () {
    console.log('Test button clicked!');
    changeBackgroundColor('lightblue');
});

// Function to calculate and display the sum of two numbers
function calculateSum() {
    var num1 = parseInt(document.getElementById('num1').value, 10);
    var num2 = parseInt(document.getElementById('num2').value, 10);
    var sum = num1 + num2;
    document.getElementById('sumResult').innerText = 'Sum: ' + sum;
}
Bundling and Minification in ASP.NET Core MVC Using WebOptimizer

Using WebOptimizer in ASP.NET Core MVC for bundling and minification involves a few steps. WebOptimizer is a middleware for ASP.NET Core that allows you to bundle and minify CSS and JavaScript files and optimize other types of files like images. Here is how to use WebOptimizer for bundling and minification in an ASP.NET Core MVC application:

Install WebOptimizer

First, you need to add the WebOptimizer NuGet package to your project. You can do this via the NuGet Package Manager or by running the following command in your package manager console:

Install-Package LigerShark.WebOptimizer.Core

Configure WebOptimizer Service

In the Program.cs file of your ASP.NET Core project, you need to configure the WebOptimizer pipeline. This involves adding it to the service collection and specifying which files to bundle and minify. This step enables the WebOptimizer services in your application. So, add the following code to the Main method of the Program file:

builder.Services.AddWebOptimizer(pipeline =>
{
    pipeline.AddCssBundle("/css/bundle.css", "css/StyleSheet1.css,css/StyleSheet2.css");
    pipeline.AddJavaScriptBundle("/js/bundle.js", "js/JavaScript1.js,js/JavaScript2.js");
    pipeline.MinifyCssFiles();
    pipeline.MinifyJsFiles();
});

In the above code, CSS files located in the css folder and JavaScript files located in the js folder are bundled and minified. The /*.css and /*.js patterns mean “all CSS/JS files in these directories and their subdirectories.”

Configure WebOptimizer Middleware

In the Program.cs file, ensure that you have the app.UseWebOptimizer(); line before app.UseStaticFiles();. This order is important for the middleware to function correctly.

app.UseWebOptimizer();
app.UseStaticFiles();
Update Your Views

In your Razor views, you need to update the references to the CSS and JavaScript files to point to the bundled files. So, in your _Layout.cshtml file, please add the following two links:

<link rel="stylesheet" href="~/css/bundle.css">
<script src="~/js/bundle.js"></script>
Run and Test Your Application

Run your application and check that the bundled and minified files are being served correctly. You can inspect the network traffic in your browser’s developer tools to confirm that bundle.css and bundle.js are loaded, as shown in the below image:

Bundling and Minification in ASP.NET Core Using WebOptimizer with Examples

In the next article, I will discuss How to Host ASP.NET Core Web Applications In a Local IIS Server. In this article, I try to explain Bundling and Minification in ASP.NET Core Using WebOptimizer with Examples. I hope you enjoy this article, Bundling and Minification in ASP.NET Core Using WebOptimizer.

Leave a Reply

Your email address will not be published. Required fields are marked *