asp.net-core
Sprzedaż wiązana i minimalizacja

Chrząknięcie i przełykanie

W aplikacjach ASP.NET Core pakietowanie i minimalizowanie zasobów po stronie klienta podczas projektowania odbywa się za pomocą narzędzi innych firm, takich jak Gulp i Grunt . Dzięki pakietowaniu i minimalizacji w czasie projektowania zminimalizowane pliki są tworzone przed wdrożeniem aplikacji. Pakowanie i minimalizowanie przed wdrożeniem zapewnia przewagę zmniejszonego obciążenia serwera. Należy jednak pamiętać, że wiązanie i minimalizowanie czasu projektowania zwiększa złożoność kompilacji i działa tylko z plikami statycznymi.

Odbywa się to w programie ASP.NET Core, konfigurując Gulp za pomocą pliku gulpfile.js w projekcie:

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

Podejście to odpowiednio połączy i zminimalizuje istniejące pliki Javascript i CSS odpowiednio do używanych katalogów i wzorców globowania.

Rozszerzenie Bundler i Minifier

Program Visual Studio zawiera również dostępny pakiet Bundler i rozszerzenie Minifier, które są w stanie obsłużyć ten proces. Rozszerzenie pozwala łatwo wybrać i spakować potrzebne pliki bez pisania wiersza kodu.

Budowanie pakietów

Po zainstalowaniu rozszerzenia wybierz wszystkie określone pliki, które chcesz zawrzeć w pakiecie, i skorzystaj z opcji Pakuj i zmniejsz pliki z rozszerzenia:

Spowoduje to wyświetlenie nazwy pakietu i wybranie lokalizacji, w której chcesz go zapisać. W swoim projekcie zauważysz nowy plik o nazwie bundleconfig.json który wygląda następująco:

[
  {
    "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" 
    ]
  }
]

UWAGA: Kolejność wybierania plików określi kolejność ich pojawiania się w pakiecie, więc jeśli masz jakieś zależności, upewnij się, że bierzesz to pod uwagę.

Minimalizowanie pakietów

Teraz poprzedni krok po prostu spakuje twoje pliki, jeśli chcesz zminimalizować pakiet, musisz wskazać to w pliku bundleconfig.json. Po prostu dodaj blok minify , taki jak poniżej, do istniejącego pakietu, aby wskazać, że chcesz go zminimalizować:

[
  {
    "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
    }
  }
]

Zautomatyzuj swoje pakiety

Wreszcie, jeśli chcesz zautomatyzować ten proces, możesz zaplanować uruchamianie zadania za każdym razem, gdy tworzona jest aplikacja, aby zapewnić, że twoje pakiety odzwierciedlają wszelkie zmiany w aplikacji.

Aby to zrobić, musisz wykonać następujące czynności:

• Otwórz Eksploratora zadań (za pomocą Narzędzia> Eksploratora zadań).
• Kliknij prawym przyciskiem myszy opcję Aktualizuj wszystkie pliki poniżej bundleconfig.json .
• Wybierz preferowane wiązanie z menu kontekstowego Wiązania.

Po wykonaniu tej czynności pakiety powinny zostać automatycznie zaktualizowane zgodnie z wybranym krokiem.

Polecenie pakietu dotnet

W wersji ASP.NET Core RTM wprowadzono BundlerMinifier.Core , nowe narzędzie do pakietowania i minimalizacji, które można łatwo zintegrować z istniejącymi aplikacjami ASP.NET Core i nie wymaga ono żadnych zewnętrznych rozszerzeń ani plików skryptów.

Korzystanie z BundlerMinifier.Core

Aby użyć tego narzędzia, po prostu dodaj odwołanie do BundlerMinifier.Core w sekcji tools istniejącego pliku project.json , jak pokazano poniżej:

"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"
}

Konfigurowanie pakietów

Po dodaniu narzędzia musisz dodać plik bundleconfig.json do swojego projektu, który zostanie użyty do skonfigurowania plików, które chcesz uwzględnić w swoich pakietach. Minimalną konfigurację można zobaczyć poniżej:

[
  {
    "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
    }
  }
]

Tworzenie / aktualizowanie pakietów

Po skonfigurowaniu pakietów możesz spakować i zminimalizować istniejące pliki za pomocą następującego polecenia:

dotnet bundle

Zautomatyzowane wiązanie

Proces łączenia i minimalizacji można zautomatyzować w ramach procesu kompilacji, dodając komendę dotnet bundle w sekcji prekompilacji istniejącego pliku project.json :

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

Dostępne polecenia

Możesz zobaczyć listę wszystkich dostępnych poleceń i ich opisy poniżej:

• pakiet dotnet - Wykonuje polecenie pakietu za pomocą pliku bundleconfig.json celu bundleconfig.json i bundleconfig.json określonych plików.
• dotnet bundle clean - Usuwa wszystkie istniejące pliki wyjściowe z dysku.
• Zegarek pakietu dotnet - Tworzy obserwatorów, którzy automatycznie uruchamiają dotnet bundle za każdym razem, gdy istniejący plik wejściowy z konfiguracji pliku bundleconfig.json połączy swoje pliki.
• Pomoc pakietu dotnet - wyświetla wszystkie dostępne opcje pomocy i instrukcje dotyczące korzystania z interfejsu wiersza poleceń.