Minimierung und Bündelung in SharePoint Online

Wichtig :  Dieser Artikel wurde maschinell übersetzt. Bitte beachten Sie den Haftungsausschluss. Die englische Version des Artikels ist als Referenz hier verfügbar: hier.

In diesem Artikel wird beschrieben, wie Sie die Minimierungs- und Bündelungsmethoden mit Web Essentials verwenden, um die Anzahl der HTTP-Anforderungen zu reduzieren und die Zeit verkürzen, die zum Laden von Seiten in SharePoint Online benötigt wird.

Es kann sein, dass Sie beim Anpassen Ihrer Website eine große Anzahl zusätzlicher Dateien zum Server hinzufügen müssen, um die Anpassung zu unterstützen. Durch Hinzufügen von zusätzlichen JavaScript-, CSS- und Bilddateien erhöht sich die Anzahl der HTTP-Anforderungen an den Server, wodurch wiederum der Vorgang zum Anzeigen einer Webseite verlangsamt wird. Wenn Sie über mehrere Dateien desselben Typs verfügen, können Sie diese Dateien bündeln, um das Herunterladen dieser Dateien zu beschleunigen.

Bei JavaScript- und CSS-Dateien können Sie auch einen Ansatz namens Minimierung anwenden. Dabei verringern Sie die Gesamtgröße der Dateien durch Entfernen von Leerzeichen und anderen Zeichen, die nicht erforderlich sind.

Minimierung und Bündelung von JavaScript- und CSS-Dateien mit Web Essentials

Sie können eine Drittanbietersoftware (z. B. Web Essentials) verwenden, um CSS- und JavaScript-Dateien zu bündeln.

Wichtig : Web Essentials ist ein communitybasiertes Open Source-Drittanbieterprojekt. Die Software ist eine Erweiterung von Visual Studio 2012 und Visual Studio 2013 und wird von Microsoft nicht unterstützt. Wenn Sie Web Essentials herunterladen möchten, besuchen Sie die Website http://vswebessentials.com/download.

Web Essentials bietet zwei Arten der Bündelung:

  • BUNDLE: für CSS- und JavaScript-Dateien

  • SPRITE: für Bilder (nur in Visual Studio 2013 verfügbar)

Sie können Web Essentials verwenden, wenn Sie über ein vorhandenes Feature mit Brandingelementen verfügen, auf die innerhalb einer benutzerdefinierten Masterseite verwiesen wird. Beispiel:

Screenshot des Marke Elements in die benutzerdefinierte Gestaltungsvorlage

So erstellen Sie ein JavaScript- und CSS-Paket in Web Essentials

  1. Wählen Sie in Visual Studio im Projektmappen-Explorer die Dateien aus, die im Paket enthalten sein sollen.

  2. Klicken Sie mit der rechten Maustaste auf die ausgewählten Dateien, und wählen Sie dann im Kontextmenü die Optionen Web Essentials > JavaScript-Paketdatei erstellen aus. Beispiel:

    Screenshot mit Web Essentials Menüoptionen

Anzeigen der Ergebnisse der Bündelung von JavaScript- und CSS-Dateien

Beim Erstellen eines JavaScript- und CSS-Pakets erstellt Web Essentials eine XML-Datei, die als Rezeptdatei bezeichnet wird. Sie gibt die JavaScript- und CSS-Dateien sowie weitere Konfigurationsinformationen an:

Screenshot des JavaScript und CSS-Anleitung-Datei

Wenn das Kennzeichen für die Minimierung im Bündelungsrezept auf "true" festgelegt ist, werden die Dateien verkleinert und in einem Paket zusammengefasst (gebündelt). Dies bedeutet, dass neue verkleinerte Versionen der JavaScript-Dateien erstellt werden, auf die Sie in Ihrer Masterseite verweisen können.

Screenshot der Minify Kennzeichnung auf True festgelegt

Wenn Sie eine Seite von Ihrer Website laden, können Sie die Entwicklertools Ihres Webbrowsers (z. B. Internet Explorer 11) verwenden, um die Anzahl der an den Server gesendeten Anforderungen und die Ladezeiten der einzelnen Dateien anzuzeigen.

In der folgenden Abbildung wird das Ergebnis des Ladens der JavaScript- und CSS-Dateien vor der Minimierung angezeigt.

Screenshot mit 80 heruntergeladene Elemente

Nach der Bündelung der CSS- und JavaScript-Dateien ist die Anzahl der Anforderungen auf 74 gesunken, und die Downloadzeit der einzelnen Dateien war nur geringfügig länger als die der ursprünglichen Dateien:

Screenshot mit 74 heruntergeladene Elemente

Nach der Bündelung hat sich die Größe der JavaScript-Paketdatei deutlich von 815 KB auf 365 KB verringert:

Screenshot mit geringerer Dateigröße bei download

Bündeln von Bildern durch Erstellen eines Image Sprite

Ähnlich wie beim Bündeln von JavaScript- und CSS-Dateien können Sie viele kleine Symbole und andere allgemeine Bilder in einem größeren Sprite-Blatt kombinieren und dann CSS verwenden, um die einzelnen Bilder anzuzeigen. Statt jedes Bild einzeln herunterzuladen, lädt der Webbrowser des Benutzers das Sprite-Blatt einmal herunter und speichert es dann auf dem lokalen Computer zwischen. Dadurch wird die Leistung beim Laden von Seiten verbessert, weil die Anzahl der Downloads und Roundtrips an den Webserver verringert wird.

So erstellen Sie ein Image Sprite in Web Essentials
  1. Wählen Sie in Visual Studio im Projektmappen-Explorer die Dateien aus, die im Paket enthalten sein sollen.

  2. Klicken Sie mit der rechten Maustaste auf die ausgewählten Dateien, und wählen Sie dann im Kontextmenü die Optionen Web Essentials > Image Sprite erstellen aus. Beispiel:

    So erstellen Sie ein Bild Sprite mit Screenshot
  3. Wählen Sie einen Speicherort für die Sprite-Datei aus. Bei der SPRITE-Datei handelt es sich um eine XML-Datei, die die Einstellungen und Dateien im Sprite beschreibt. In der folgenden Abbildung sehen Sie ein Beispiel für eine Sprite-PNG-Datei und die zugehörige Sprite-XML-Datei.

    Screenshot einer Sprite-Datei

    Screenshot des Sprite XML-Datei

Hinweis : Haftungsausschluss für maschinelle Übersetzungen: Dieser Artikel wurde mithilfe eines Computersystems und ohne jegliche Bearbeitung durch Personen übersetzt. Microsoft bietet solche maschinellen Übersetzungen als Hilfestellung für Benutzer ohne Englischkenntnisse an, damit Sie von den Informationen zu Produkten, Diensten und Technologien von Microsoft profitieren können. Da es sich bei diesem Artikel um eine maschinelle Übersetzung handelt, enthält er möglicherweise Fehler in Bezug auf (Fach-)Terminologie, Syntax und/oder Grammatik.

Teilen Facebook Facebook Twitter Twitter E-Mail E-Mail

War diese Information hilfreich?

Sehr gut. Noch anderes Feedback?

Was können wir verbessern?

Vielen Dank für Ihr Feedback!

×