Wie zu minifizieren von JavaScript im script-block wird auf den Seiten Ansicht

Wie minifizieren von JavaScript innerhalb einer Seite anzeigen script-block mit minimalem Aufwand?

Habe ich einige Seite bestimmte Skripts, würde gerne auf bestimmten Seiten anzeigen. Aber die ASP.NET MVC4-Bündelung und Verkleinerung funktioniert nur mit script-Dateien, nicht Skript-code innerhalb einer Seite anzeigen.

UPDATE

Nahm ich Sohnee Ratschläge zu extrahieren, die scripts in Dateien. Aber ich brauche, um Sie zu verwenden auf bestimmten Seiten so, was ich am Ende dabei ist:

layout-Seite, die ich erstellt einen optionalen Abschnitt für die Seite spezielle javascript-block:

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

dann in der Ansicht Seite, sagen wir mal Index.cshtml ich render das Skript Abschnitt wie:

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

wie Sie sehen können, nimmt der javascript-Dateinamen (index.js) ist die gleiche wie die Ansicht-Seite-name (index.cshtml). dann im bundle config habe ich:

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

dann, wenn Sie auf index Seite, die HTML-Ausgabe wird sein:

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

und wenn Sie auf products Seite, die HTML-Ausgabe wird sein:

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

InformationsquelleAutor Ray Cheng | 2012-11-01

asp.net-mvc-4

10

Den Weg, dies zu tun, mit minimalem Aufwand zu extrahieren und es in eine Skript-Datei. Dann können Sie die Bündelung und Verkleinerung nur, wie Sie wollen.

Wenn Sie möchten, verkleinern Sie die inline -, wird es eine viel größere Anstrengung ist, als einfach das verschieben der script-off-Seite.
- Ich würde gerne nicht mein Skript in der Ansicht, aber ich bin neugierig, wie würden Sie empfehlen mit @Modell-Elemente in einer externen Datei?
- Normalerweise würde ich verlangen, alle Daten die ich brauchte in meinem Skript mit einem AJAX-request, aber Sie könnte ein wenig fallen Daten in ein inline-Skript, sondern nur die Daten, die Logik würde immer noch in eine externe Datei.
- Wie Steve sagt, ich Tue so etwas wie <script>window.mynamespace.Model = @(Html.Raw(Json.Encode(Model)));</script> am Anfang von meinem code. Dies ermöglicht den Verweis auf das Modell in anderen Skripts wurden minified. Die alternative ist ein AJAX-call, aber das bedeutet zusätzliche Wartezeiten. Bauen Sie eine richtige ViewModel, und das funktioniert Super.
InformationsquelleAutor Fenton
44

Können Sie verkleinern inline-Skripts werden mit diesem HTML-helper
```
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);
        }
    }
}
```
Und in deinem Razor-Ansicht verwenden Sie es wie diese
```
 <script type="text/javascript">
           @Html.JsMinify(@<text>
        window.Yk = window.Yk || {};
        Yk.__load = [];
        window.$ = function (f) {
            Yk.__load.push(f);
        }
         </text>)
</script>
```
Wenn Sie mit System.Web.Optimierung über alle notwendigen dlls sind bereits verwiesen, andernfalls können Sie installieren WebGrease NuGet-Paket.

Einige weitere details finden Sie hier: http://www.cleansoft.lv/minify-inline-javascript-in-asp-net-mvc-with-webgrease/

BEARBEITEN:
Ersetzt DynamicInvoke() mit Invoke(). Keine Notwendigkeit für Laufzeit-checks hier Aufrufen ist viel schneller als DynamicInvoke. Hinzugefügt .? zu überprüfen, null.
- Gut zu wissen, dass es dieses auch. +1
- dies sollte die akzeptierte Antwort, wie Sie tatsächlich die Frage beantwortet
- Könnten Sie bitte etwas näher auf diese Zeile: (markup.DynamicInvoke(helper.ViewContext) ?? "").ToString();
- Markup-Code <text></text> block übergeben wird, Helfer-Methode als delegate. Wir führen delegieren, um javascript. Wir passieren Helfer.ViewContext um sicherzustellen, dass alle Anrufe zu ViewBag Anrufe werden korrekt aufgelöst. Wir rufen Sie ToString-man-string aus der delegate-Ergebnis (eigentlich ist es IHtmlString).
- Ich weiß, dass es eine erhebliche Zeit nach dieser Antwort, aber ich habe ein problem mit dieser Lösung, ich finde keine andere Antwort zu. In einigen Fällen, die diese Lösung verwenden, wenn Sie ein javascript-Ausdruck, der weniger als (<) - Zeichen, es löst einen parse error bei der Verkleinerung. Und wenn Sie möchten, erstellen Sie eine Zeichenfolge in javascript, der HTML enthält, wird es nicht richtig funktionieren wegen der bereits erwähnten weniger als symbol. Ich habe versucht mit < und >, aber dann ist der html selbst ist;t render, wenn ich es brauche auch. Hat sonst noch jemand in dieser, und vielleicht korrigiert es?
- Das war eine tolle Antwort. Er korrekt antwortet, die ursprüngliche Frage. Funktionierte perfekt. Sollte die von weit akzeptierten Lösung
- Gutes Zeug. Innerhalb der Methode, ich möchte hinzufügen, eine Kontrolle über Debugger.IsAttached zu entscheiden, ob Sie zu verkleinern oder nicht. Manchmal wollen Sie nicht Ihre JS minified wenn man lokal Debuggen.
InformationsquelleAutor samfromlv
8

Basierend auf @samfromlv Antwort, ich erstellte eine Erweiterung zu behandeln, CSS sowie. Es dauert auch BundleTable.EnableOptimizations berücksichtigt.

OptimizationExtensions.cs
- Sie können nicht verwenden Sie diese minimalization (weder @samfromlv), wenn Sie in Ihrem Skript char "<". Zum Beispiel: a <= 15. Auch er zerstört, VS-js-intellisense.
- sind Sie sicher?
- Über 2 Jahre nach meinem Kommentar? Nein, ich bin mir nicht mehr sicher.
- das ist, weil Sie nicht voranstellen <text> mit @
InformationsquelleAutor Zack Martin

Hinzufügen in eine Antwort für ASP.NET MVC-Kern. Die Lösung, die ich verwendet, um zu verkleinern inline-JS und razor generierten html wurde WebMarkupMin.

Es letztlich bis gekocht durch hinzufügen dieser zwei winzige änderungen an meinem Projekt:

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

Gibt es eine große blog-post von Andrew Lock (Autor ASP.NET Kern in Aktion) über die Verwendung WebMarkupMin https://andrewlock.net/html-minification-using-webmarkupmin-in-asp-net-core/ WebMarkupMin ist in hohem Maße konfigurierbar und Andrew ' s post geht so mehr vertiefte, sehr zu empfehlen Lesen Sie es aufmerksam, bevor Sie einfach nur kopieren und einfügen.

InformationsquelleAutor Chris Marisic

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.