28

如何以最小的努力在视图页面的脚本块中缩小 JavaScript？

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

更新

我接受了 Sohnee 的建议，将脚本提取到文件中。但我需要在特定页面上使用它们，所以我最终要做的是：

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

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

然后在视图页面中，假设Index.cshtml我像这样渲染脚本部分：

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

如您所见，它假定 javascript 文件名 ( 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>
4

6 回答 6

51

您可以使用此 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/

编辑：将 DynamicInvoke() 替换为 Invoke()。这里不需要运行时检查，Invoke 比 DynamicInvoke 快得多。添加 。？检查可能的空值。

于 2013-09-28T20:55:46.660 回答
11

以最小的努力做到这一点的方法是将其提取到脚本文件中。然后，您可以根据需要使用捆绑和缩小。

如果您想内联缩小它，这将比简单地将脚本移出页面要付出更大的努力。

于 2012-11-01T16:57:37.323 回答
8

根据@samfromlv 的回答，我也创建了一个扩展来处理 CSS。它也考虑BundleTable.EnableOptimizations在内。

优化扩展.cs

于 2013-10-09T21:24:16.367 回答
4

添加 ASP.NET MVC Core 的答案。我用来缩小内联 JS 和 razor 生成的 html 的解决方案是WebMarkupMin。

最终归结为在我的项目中添加这两个微小的更改：

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

Andrew Lock（ ASP.NET Core in Action的作者）有一篇很棒的博客文章，关于使用 WebMarkupMin https://andrewlock.net/html-minification-using-webmarkupmin-in-asp-net-core/ WebMarkupMin 是高度可配置的，并且Andrew 的帖子更深入，强烈建议您在复制和粘贴之前仔细阅读。

于 2017-05-16T16:13:44.030 回答
1

聚会有点晚了，但对于 .NET Core，您可以使用 TagHelper 来缩小脚本标记的内容，如下所示：

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

然后在您的视图中使用它：

<script minify="true">
  ...
</script>
于 2021-02-05T12:28:31.613 回答
0

Fenton 对此给出了很好的回答：“与其缩小内联 JavaScript 代码，不如将内联 JavaScript 代码外部化，然后你可以使用任何标准的 JavaScript 缩小器/捆绑器进行缩小。”

以下是外部化 JavaScript 的方法：https ://webdesign.tutsplus.com/tutorials/how-to-externalize-and-minify-javascript--cms-30718

这是我缩小内联 JavaScript 代码的直接答案（需要一些手动工作）。

  1. 复制内联 JavaScript 代码片段并将它们粘贴到单独的 JavaScript 文件中并保存，例如inline.js

  2. 使用esbuild缩小中的内联代码片段，在此处inline.js查看有关缩小的更多详细信息

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

  3. 复制缩小的 JavaScript 代码片段inline-minified.js并将其粘贴回原始 HTML 以替换标记内的原始代码。

  4. 完毕。

于 2021-10-20T20:46:01.657 回答