Scott Hanselman

WebOptimizer - a Bundler and Minifier for ASP.NET Core

November 8, '17 Comments [17] Posted in ASP.NET | DotNetCore | Open Source
Sponsored By

ASP.NET Core didn't have a runtime bundler like previous versions of ASP.NET. This was a bummer as I was a fan. Fortunately Mads Kristensen created one and put it on GitHub, called WebOptimizer.

WebOptimizer - ASP.NET Core middleware for bundling and minification of CSS and JavaScript files at runtime. With full server-side and client-side caching to ensure high performance.

I'll try it out on a default ASP.NET Core 2.0 app.

First, assuming I've installed http://dot.net I'll run

C:\Users\scott\Desktop> cd squishyweb

C:\Users\scott\Desktop\squishyweb> dotnet new mvc
The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/template-3pn for details.

SNIP

Restore succeeded.

Then I'll add a reference to the WebOptimizer package. Be sure to check the versioning and pick the one you want, or use the latest.

C:\Users\scott\Desktop\squishyweb> dotnet add package LigerShark.WebOptimizer.Core --version 1.0.178-beta 

Add the service in ConfigureServices and add it (I'll do it conditionally, only when in Production) in Configure. Notice I had to put it before UseStaticFiles() because I want it to get the first chance at those requests.

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddWebOptimizer();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseWebOptimizer();
app.UseExceptionHandler("/Home/Error");
}

app.UseStaticFiles();

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}

After running "dotnet run" I'll request site.css as an example and see it's automatically minimized:

CSS minification automatically

You can control the pipeline with globbing like this:

public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
services.AddWebOptimizer(pipeline =>
{
pipeline.MinifyJsFiles("js/a.js", "js/b.js", "js/c.js");
});
}

If I wanted to combine some files into an output "file" that'll be held/cached only in memory, I can do that also. To be clear, it'll never touch the disk, it's just a URL. Then I can just refer to it with a <link> within my Razor Page or main Layout.

services.AddWebOptimizer(pipeline =>
{
pipeline.AddCssBundle("/css/mybundle.css", "css/*.css");
});

WebOptimizer also supports automatic "cache busting" with a ?v= query string created by a TagHelper. It can even compile Scss (Sass) files into CSS. There's plugins for TypeScript, Less, and Markdown too!

WebOptimizer is open source and lives at https://github.com/ligershark/WebOptimizer. Go check it out, kick the tires, and see if it meets your needs! Maybe get involved and make a fix or help with docs! There are already some open issues you could start helping with.


Sponsor: Check out JetBrains Rider: a new cross-platform .NET IDE. Edit, refactor, test and debug ASP.NET, .NET Framework, .NET Core, Xamarin or Unity applications. Learn more and download a 30-day trial!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Wednesday, 08 November 2017 09:49:10 UTC
Nice - just in time for my first dotnetcore single page app project, too.
Robert Armour
Wednesday, 08 November 2017 10:25:05 UTC
This looks super useful, especially for folks who are either just starting out or haven't mastered the absolute wizardry of WebPack (or are using a template which doesn't include WebPack).

What would take this to the next level is if a developer could supply a config for it (as a json/ini/xml) and load that in. At least, in my opinion.
Wednesday, 08 November 2017 10:59:16 UTC
Smidge has been around as a runtime bundler since the beginning of ASP.NET Core even back when DNX, etc... was a thing

https://github.com/shazwazza/smidge


Wednesday, 08 November 2017 11:30:09 UTC
Wouldn't it be better to bunble/minify files at release/publish time? In my opinion thats wasted CPU/Memory to bundle/minify them at runtime.
Wednesday, 08 November 2017 12:50:11 UTC

Wouldn't it be better to bunble/minify files at release/publish time?

Sure but you could use your favourite production checks obviously to resolve that (#ifdef !DEBUG)
Wednesday, 08 November 2017 14:57:53 UTC
If I understand this correctly, this removes my pain. No more Node JS to get NPM to get Bower to install bootstrap or jquery. Just drop the js and css in folders again. Use the taghelpers to use cdn in production and use weboptimizer for my own js and sass to minimize, combine etc.
Wednesday, 08 November 2017 15:27:15 UTC
It would be nice it if flattened out the HTML, the JS mostly comes minified already from bower so, what is the point?
Chris
Wednesday, 08 November 2017 17:06:55 UTC
Why not use the "Bundler & Minifier" VS extension also by Mads?
Preston
Wednesday, 08 November 2017 18:01:44 UTC
It would be nice it if flattened out the HTML, the JS mostly comes minified already from bower so, what is the point?
Wednesday, 08 November 2017 21:09:15 UTC
looks useful , thanks for sharing
Wednesday, 08 November 2017 21:10:19 UTC
thanks for sharing
Friday, 10 November 2017 20:37:45 UTC
Several attempts were made to do this, but I did not succeed.
Thank you for the training you posted.
Friday, 10 November 2017 21:59:03 UTC
Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have. Keep up the good work you are doing here.
Saturday, 11 November 2017 06:14:35 UTC
thankyou for article
Saturday, 11 November 2017 15:03:26 UTC
Why not use the "Bundler & Minifier" VS extension also by Mads?
Yeah I was wondering the same thing.
Frank
Wednesday, 15 November 2017 13:35:00 UTC
I like this syntax very much. Thanks for sharing.
Sunday, 19 November 2017 10:37:13 UTC
Extending on Scott's description, find all minification information required for front-end minification, at compile time, for Gradle :-

Gradle JS and CSS Minification Tasks
Aditya Arora
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Live Comment Preview

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.