How to minify JavaScript inside script block on view pages

Adding in an answer for ASP.NET MVC Core. The solution I used to minify inline JS and razor generated html was WebMarkupMin.

It ultimately boiled down to adding these two minuscule changes to my project:

public void Configure(IApplicationBuilder app)  
{
    app.UseStaticFiles();

    //added
    app.UseWebMarkupMin();

    app.UseMvc(.....
}

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

    //added    
    services.AddWebMarkupMin(
        options =>
        {
            //i comment these two lines out after testing locally
            options.AllowMinificationInDevelopmentEnvironment = true;
            options.AllowCompressionInDevelopmentEnvironment = true;
        })
        .AddHttpCompression();
}

There's a great blog post by Andrew Lock (author of ASP.NET Core in Action) about using WebMarkupMin https://andrewlock.net/html-minification-using-webmarkupmin-in-asp-net-core/ WebMarkupMin is highly configurable and Andrew's post goes way more indepth, highly recommended reading it intently before just copying and pasting.


You can minify inline scripts using this HTML helper

using Microsoft.Ajax.Utilities;
using System;

namespace System.Web.Mvc
{
    public class HtmlHelperExtensions
    {
        public static MvcHtmlString JsMinify(
            this HtmlHelper helper, Func<object, object> markup)
        {
           string notMinifiedJs =
            markup.Invoke(helper.ViewContext)?.ToString() ?? "";

            var minifier = new Minifier();
            var minifiedJs = minifier.MinifyJavaScript(notMinifiedJs, new CodeSettings
            {
                EvalTreatment = EvalTreatment.MakeImmediateSafe,
                PreserveImportantComments = false
            });
            return new MvcHtmlString(minifiedJs);
        }
    }
}

And inside your Razor View use it like this

 <script type="text/javascript">
           @Html.JsMinify(@<text>
        window.Yk = window.Yk || {};
        Yk.__load = [];
        window.$ = function (f) {
            Yk.__load.push(f);
        }
         </text>)
</script>

If you use System.Web.Optimization than all necessary dlls are already referenced otherwise you can install WebGrease NuGet package.

Some additional details available here: http://www.cleansoft.lv/minify-inline-javascript-in-asp-net-mvc-with-webgrease/

EDIT: Replaced DynamicInvoke() with Invoke(). No need for runtime checks here, Invoke is much faster than DynamicInvoke. Added .? to check for possible null.


Based on @samfromlv's answer, I created an extension to handle CSS as well. It also takes BundleTable.EnableOptimizations into consideration.

OptimizationExtensions.cs


The way to do this with minimal effort is to extract it into a script file. Then you can use bundling and minification just as you want.

If you want to minify it inline, it will be a much greater effort than simply moving the script off-page.