How to minify JavaScript inside script block on view pages

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

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.

A little late for the party, but for .NET Core you could use a TagHelper to minify the content of a script tag like this:

[HtmlTargetElement("script", Attributes = MinifyAttributeName)]
public class ScriptTagHelper : TagHelper
{
    private const string MinifyAttributeName = "minify";

    [HtmlAttributeName(MinifyAttributeName)]
    public bool ShouldMinify { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        if (!ShouldMinify)
        {
            await base.ProcessAsync(context, output);
            return;
        }

        var textChildContent = await output.GetChildContentAsync();
        var scriptContent = textChildContent.GetContent();

        // or use any other minifier here
        var minifiedContent = NUglify.Uglify.Js(scriptContent).Code;

        output.Content.SetHtmlContent(minifiedContent);
    }
}

and then use it in your views:

<script minify="true">
  ...
</script>

Fenton had a great answer about this: "rather than minify inline JavaScript code, externalize the inline JavaScript code and then you can minify with any standard JavaScript minifiers / bundlers."

Here is how you externalize the JavaScript: https://webdesign.tutsplus.com/tutorials/how-to-externalize-and-minify-javascript--cms-30718

Here is my direct answer to minify the inline JavaScript code (require a bit of manual work).

1. Copy the inline JavaScript code snippet and paste them into a separate JavaScript file and save it, e.g. inline.js

2. Use esbuild to minify the inline code snippet in inline.js, see more details about minification here

   esbuild --minify < inline.js > inline-minified.js
   

3. Copy the minified JavaScript code snippet in inline-minified.js and paste it back into the original HTML to replace the original code inside of the tag.

4. Done.