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

そして、RazorView内でこのように使用します

 <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がすでに参照されています。それ以外の場合は、WebGreaseNuGetパッケージをインストールできます。

ここで利用可能ないくつかの追加の詳細：http ：//www.cleansoft.lv/minify-inline-javascript-in-asp-net-mvc-with-webgrease/

編集：DynamicInvoke（）をInvoke（）に置き換えました。ここではランタイムチェックは必要ありません。InvokeはDynamicInvokeよりもはるかに高速です。追加した 。？nullの可能性をチェックします。

于 2013-09-28T20:55:46.660 に答える
11

最小限の労力でこれを行う方法は、スクリプトファイルに抽出することです。次に、必要に応じてバンドルとミニファイを使用できます。

インラインで縮小したい場合は、単にスクリプトをページ外に移動するよりもはるかに手間がかかります。

于 2012-11-01T16:57:37.323 に答える
8

@samfromlvの回答に基づいて、CSSも処理する拡張機能を作成しました。それもBundleTable.EnableOptimizations考慮に入れます。

OptimizationExtensions.cs

于 2013-10-09T21:24:16.367 に答える
4

ASP.NETMVCコアの回答を追加します。インラインJSとかみそりで生成されたhtmlを縮小するために使用したソリューションは、WebMarkupMinでした。

最終的には、これら2つの小さな変更をプロジェクトに追加することになります。

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 に答える