Как минимизировать JavaScript внутри блока script на страницах просмотра

Как минимизировать JavaScript внутри страницы просмотра script с минимальными усилиями?

У меня есть сценарии, специфичные для страницы, которые хотели бы использовать определенные страницы просмотра. Но компоновка и минимизация ASP.NET MVC4 работает только с файлами script, а не script на странице просмотра.

UPDATE

Я взял совет Sohnee, чтобы извлечь скрипты в файлы. Но мне нужно использовать их на определенных страницах, поэтому в итоге я делаю следующее:

на странице макета, я создал необязательный раздел для конкретного блока javascript:

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

то на странице просмотра, скажем, Index.cshtml, я представляю раздел script следующим образом:

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

как вы можете видеть, предполагается, что имя файла javascript (index.js) совпадает с именем страницы просмотра (Index.cshtml). то в конфигурации пучка i:

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>

и если вы находитесь на странице proejcts, выход html будет выглядеть следующим образом:

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

Ответы

Ответ 1

Способ сделать это с минимальными усилиями - извлечь его в файл script. Затем вы можете использовать связывание и минимизацию, как хотите.

Если вы хотите уменьшить его в строке, это будет гораздо больше, чем просто перемещение script вне страницы.

Ответ 2

Вы можете минимизировать встроенные скрипты с помощью этого 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/

EDIT: Заменено DynamicInvoke() с помощью Invoke(). Нет необходимости проверять время выполнения, Invoke намного быстрее, чем DynamicInvoke. Добавлено.? для проверки возможного нулевого значения.

Ответ 3

На основе ответа @samfromlv я создал расширение для обработки CSS. Он также учитывает BundleTable.EnableOptimizations.

OptimizationExtensions.cs

Ответ 4

Добавление ответа в ASP.NET MVC Core. Решение, которое я использовал для минимизации встроенных JS и бритв, сгенерированных 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 идет намного глубже, настоятельно рекомендуется внимательно его прочитать, прежде чем просто копировать и вставлять.