如何在视图页面上缩小脚本块内的JavaScript

Question

如何轻松地在视图页面的脚本块中缩小JavaScript？

我有一些页面特定的脚本,希望放在特定的视图页面上.但ASP.NET MVC4捆绑和缩小仅适用于脚本文件,而不适用于视图页面中的脚本代码.

UPDATE

我接受了Sohnee的建议,将脚本解压缩到文件中.但我需要在特定的页面上使用它们,所以我最终做的是:

在布局页面上,我为页面特定的javascript块创建了一个可选部分:

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

然后在视图页面中,让我们说Index.cshtml,我像这样渲染脚本部分:

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

如您所见,它假设javascript filename(index.js)与视图页面名称(index.cshtml)相同.然后在捆绑配置中,我有:

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)));
}

然后,如果你在index页面上,HTML输出将是:

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

如果你在products页面上,HTML输出将是:

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

Answer 1

您可以使用此HTML帮助程序缩小内联脚本

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);
        }
    }
}

在Razor View中使用它就像这样

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

如果您使用System.Web.Optimization,则已经引用了所有必需的dll,否则您可以安装WebGrease NuGet包.

此处提供了一些其他详细信息:http://www.cleansoft.lv/minify-inline-javascript-in-asp-net-mvc-with-webgrease/

编辑:用Invoke()替换DynamicInvoke().这里不需要运行时检查,Invoke比DynamicInvoke快得多.添加 .？检查可能的null.

Answer 2

以最小的努力完成此操作的方法是将其提取到脚本文件中.然后您可以根据需要使用捆绑和缩小.

如果你想将其缩小内联,那么只需将脚本移到页外即可.

Answer 3

根据@ samfromlv的回答,我创建了一个处理CSS的扩展.它也考虑BundleTable.EnableOptimizations到了.

OptimizationExtensions.cs