In this article, I summarize why WebOptimizer is a great solution for bundling and minifying static file assets in ASP .NET website.
Figure:WebOptimizer GitHub stats.
Web Optimizer
I recently started using bundling and minification strategies to improve the load speed of static CSS and JS assets within my ASP.NET websites. Bundling and minifcation are significant concepts since they can help maximize website performance; bundling is the process of combining multiple assets into one, while minification is the process of generating a size-optimal version of assets. Compared to their original versions, assets that have been bundled and minified typically result in lower file sizes and fewer requests to the server.
I want to share a library that I appreciate for its ease of integration and simplicity of configuration: WebOptimizer. In addition to bundling and minification capabilities, it has several addon libraries for optional features such as SCSS file compilation.
Within my ASP.NET project, including the WebOptimizer library was very simple via the Nuget Package Manager. Next, for my style assets, the changes necessary to utilize WebOptimizer consisted of two additions within the application's configuration section (in my case, within the Program class's Main(...) function):
var builder = WebApplication.CreateBuilder(args);
...
// 1) Add WebOptimizer to the application services and configure it:
// Bundle and minify static file assets:
builder.Services.AddWebOptimizer(pipeline =>
{
pipeline.AddScssBundle("/css/bundle.css", "/lib/*.scss", "/scss/*.scss");
});
// 2) Tell the application to use the WebOptimizer middleware prior to calling UseStaticFiles():
...
app.UseWebOptimizer(); // Bundling and Minification
...
app.UseStaticFiles();
...
The above code compiles, bundles, and minifies all scss files within the /lib and /scss directories of my project's file structure and writes the results to a file named "bundle.css"; referencing "bundle.css" in an HTML file will load the bundled contents: <link rel="stylesheet" href="/css/bundle.css" />.
There are other alternatives for bundling/minification within ASP.NET, but I like WebOptimizer for its ease of use and feature-richness. Thanks for reading!