Question

How to minify JavaScript inside a view page’s script block with minimal effort?

I have some page specific scripts that would like to put on specific view pages. But the ASP.NET MVC4 bundling and minification only works with script files, not script code inside a view page.

UPDATE

I took Sohnee’s advice to extract the scripts into files. But I need to use them on specific pages so what I end up doing is:

on layout page, i created an optional section for page specific javascript block:

    @RenderSection("js", required: false)
</body>

then in the view page, let’s say Index.cshtml, i render the script section like such:

@section js{    
    @Scripts.Render("~/bundles/js/" + Path.GetFileNameWithoutExtension(this.VirtualPath))
}

as you can see, it assumes the javascript filename (index.js) is the same as the view page name (index.cshtml). then in the bundle config, i have:

var jsFiles = Directory.GetFiles(HttpContext.Current.Server.MapPath("Scripts/Pages"), "*.js");
foreach (var jsFile in jsFiles)
{
    var bundleName = Path.GetFileNameWithoutExtension(jsFile);
    bundles.Add(new ScriptBundle("~/bundles/js/" + bundleName).Include(
    "~/Scripts/pages/" + Path.GetFileName(jsFile)));
}

then, if you are on index page, the HTML output will be:

    <script src="/bundles/js/Index?v=ydlmxiUb9gTRm508o0SaIcc8LJwGpVk-V9iUQwxZGCg1"></script>
</body>

and if you are on products page, the HTML output will be:

    <script src="/bundles/js/Products?v=ydlmxiUb9gTRm508o0SaIcc8LJwGpVk-V9iUQwxZGCg1"></script>
</body>

Answer 1

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.