asp.net-core
Bündelung und Minifizierung

Grunzen und Schlucken

In ASP.NET Core-Apps bündeln und minimieren Sie die clientseitigen Ressourcen während der Entwurfszeit mit Tools von Drittanbietern wie Gulp und Grunt . Durch Verwenden der Entwurfszeitbündelung und -minimierung werden die minimierten Dateien vor der Bereitstellung der Anwendung erstellt. Die Bündelung und Minimierung vor der Bereitstellung bietet den Vorteil einer geringeren Serverlast. Es ist jedoch wichtig zu wissen, dass die Bündelung und Minimierung der Entwurfszeit die Build-Komplexität erhöht und nur mit statischen Dateien funktioniert.

Dies erfolgt in ASP.NET Core durch Konfigurieren von Gulp über eine Datei gulpfile.js innerhalb Ihres Projekts:

// Defining dependencies
var gulp = require("gulp"),  
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

// Define web root
var webroot = "./wwwroot/"

// Defining paths
var paths = {  
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

// Bundling (via concat()) and minifying (via uglify()) Javascript
gulp.task("min:js", function () {  
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

// Bundling (via concat()) and minifying (via cssmin()) Javascript
gulp.task("min:css", function () {  
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

Bei diesem Ansatz werden Ihre vorhandenen Javascript- und CSS-Dateien entsprechend den verwendeten Verzeichnissen und Globbing-Mustern ordnungsgemäß gebündelt und verkleinert.

Bundler- und Minifier-Erweiterung

Visual Studio bietet auch eine verfügbare Bundler- und Minifier-Erweiterung , die diesen Prozess für Sie erledigen kann. Mit der Erweiterung können Sie die benötigten Dateien einfach auswählen und bündeln, ohne eine Codezeile schreiben zu müssen.

Erstellen Sie Ihre Bundles

Nach der Installation der Erweiterung wählen Sie alle spezifischen Dateien aus, die in einem Bundle enthalten sein sollen, und verwenden die Option Bundle and Minify Files aus der Erweiterung:

Daraufhin werden Sie aufgefordert, das Bundle zu benennen und einen Speicherort für das Paket auszuwählen. Sie werden dann eine neue Datei in Ihrem Projekt mit dem Namen bundleconfig.json die wie folgt aussieht:

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ]
  }
]

ANMERKUNG: Die Reihenfolge, in der die Dateien ausgewählt werden, bestimmt die Reihenfolge, in der sie im Paket angezeigt werden. Wenn Sie also Abhängigkeiten haben, stellen Sie sicher, dass Sie diese berücksichtigen.

Minimieren Sie Ihre Bundles

Im vorherigen Schritt werden nun einfach Ihre Dateien gebündelt. Wenn Sie das Bundle minimieren möchten, müssen Sie dies in der Datei bundleconfig.json angeben. minify Ihrem vorhandenen Bundle einfach einen minify Block wie den folgenden hinzu, um anzugeben, dass er minimiert werden soll:

[
  {
    "outputFileName": "wwwroot/app/bundle.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" 
    ],
    "minify": {
      "enabled": true
    }
  }
]

Automatisieren Sie Ihre Bundles

Wenn Sie diesen Prozess automatisieren möchten, können Sie schließlich die Ausführung einer Aufgabe planen, wann immer Ihre Anwendung erstellt wird, um sicherzustellen, dass Ihre Bundles alle Änderungen in Ihrer Anwendung widerspiegeln.

Dazu müssen Sie Folgendes tun:

• Öffnen Sie den Task Runner Explorer (über Extras> Task Runner Explorer).
• Klicken Sie mit der rechten bundleconfig.json auf die Option Alle Dateien bundleconfig.json unter bundleconfig.json .
• Wählen Sie im Bindungskontextmenü Ihre bevorzugte Bindung aus.

Danach sollten Ihre Bundles automatisch bei dem von Ihnen ausgewählten bevorzugten Schritt aktualisiert werden.

Der Dotnet-Bundle-Befehl

Mit der ASP.NET Core RTM-Version wurde BundlerMinifier.Core eingeführt, ein neues Bundling- und Minification-Tool, das einfach in vorhandene ASP.NET Core-Anwendungen integriert werden kann und keine externen Erweiterungen oder Skriptdateien erfordert.

BundlerMinifier.Core verwenden

Um dieses Tool zu verwenden, fügen Sie einfach einen Verweis auf BundlerMinifier.Core im tools Abschnitt Ihrer vorhandenen project.json Datei hinzu (siehe unten):

"tools": {
  "BundlerMinifier.Core": "2.0.238",
  "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
  "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
}

Konfigurieren Sie Ihre Bundles

Nachdem Sie das Tool hinzugefügt haben, müssen Sie Ihrem Projekt eine bundleconfig.json Datei hinzufügen , die zum Konfigurieren der Dateien verwendet wird, die Sie in Ihre Bundles aufnehmen möchten. Eine minimale Konfiguration ist unten zu sehen:

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  },
  {
    "outputFileName": "wwwroot/js/semantic.validation.min.js",
    "inputFiles": [
      "wwwroot/js/semantic.validation.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

Bundles erstellen / aktualisieren

Nachdem Ihre Bundles konfiguriert wurden, können Sie Ihre vorhandenen Dateien mit dem folgenden Befehl bündeln und minimieren:

dotnet bundle

Automatisiertes Bündeln

Der Bundling- und Minification-Prozess kann als Teil des Build-Prozesses automatisiert werden, indem Sie den Befehl dotnet bundle im Abschnitt Vorkompilierung Ihrer vorhandenen Datei project.json hinzufügen:

"scripts": {
  "precompile": [
    "dotnet bundle"
  ]
}

Verfügbare Befehle

Nachfolgend finden Sie eine Liste aller verfügbaren Befehle und deren Beschreibungen:

• dotnet Bündel - Führt das Bündel Befehl , um die Verwendung von bundleconfig.json Datei Ihrer angegebenen Dateien zu bündeln und minify.
• dotnet bundle clean - Löscht alle vorhandenen Ausgabedateien von der Festplatte.
• dotnet bundle watch - Erstellt ein Watcher, das dotnet bundle automatisch dotnet bundle wenn eine vorhandene Eingabedatei aus der bundleconfig.json Konfiguration zum bundleconfig.json Ihrer Dateien verwendet wird.
• Dotnet-Bundle-Hilfe - Zeigt alle verfügbaren Hilfeoptionen und Anweisungen für die Verwendung der Befehlszeilenschnittstelle an.