Office
Aanmelden

Minification en bundeling in SharePoint Online

In dit artikel wordt beschreven hoe u minification- en bundelingstechnieken kunt gebruiken met Web Essentials om het aantal HTTP-aanvragen terug te brengen en om de tijd te verkorten die nodig is voor het laden van pagina's in SharePoint Online.

Wanneer u uw website aanpast, kan er een groot aantal extra bestanden worden toegevoegd op de server ter ondersteuning van deze aanpassingen. Het toevoegen van extra JavaScript, CSS en afbeeldingen leidt tot een groter aantal HTTP-aanvragen aan de server, waardoor het ook langer duurt voordat een webpagina wordt weergegeven. Als u meerdere bestanden van hetzelfde type hebt, kunt u deze bestanden bundelen zodat ze sneller kunnen worden gedownload.

Voor JavaScript- en CSS-bestanden kunt u ook een methode genaamd minification toepassen, waarbij u de totale grootte van bestanden beperkt door witruimte en andere overbodige tekens te verwijderen.

Minification en bundeling van JavaScript- en CSS-bestanden met Web Essentials

U kunt software van derden gebruiken, zoals Web Essentials, om CSS- en JavaScript-bestanden te bundelen.

Belangrijk: Web Essentials is een opensourceproject van derden, gebaseerd op een community. De software is een uitbreiding van Visual Studio 2012 en Visual Studio 2013 en wordt niet ondersteund door Microsoft. Ga naar de website op http://vswebessentials.com/download als u Web Essentials wilt downloaden.

Web Essentials biedt twee soorten bundeling:

  • .bundle: voor CSS- en JavaScript-bestanden

  • .sprite: voor afbeeldingen (alleen beschikbaar in Visual Studio 2013)

U kunt Web Essentials gebruiken als u een bestaande functie hebt voor bepaalde huisstijlelementen waarnaar wordt verwezen in een aangepaste basispagina, zoals:

eNom-Configure-1-3

Een TE000127218- en CSS-bundel maken in Web Essentials

  1. Selecteer in Visual Studio de bestanden die u wilt toevoegen aan de bundel.

  2. Klik met de rechtermuisknop op de geselecteerde bestanden en selecteer vervolgens Web Essentials > JavaScript-bundelbestand maken in het snelmenu. Bijvoorbeeld:

    Acht functies van afbeeldingen in een presentatie

De resultaten van het bundelen van JavaScript- en CSS-bestanden bekijken

Bij het maken van een JavaScript- en CSS-bundel maakt Web Essentials een XML-bestand dat een recipe-bestand wordt genoemd, waarin naar de JavaScript- en CSS-bestanden wordt verwezen. Ook bevat het bestand enige andere configuratie-informatie:

Werkbalk Snelle toegang in linkerbovenhoek (standaardlocatie)

Als de minify-markering is ingesteld op waar (true) in de bundelingscodering, worden de bestanden niet alleen gebundeld, maar ook kleiner gemaakt. Dit betekent dat nieuwe miniversies van de JavaScript-bestanden zijn gemaakt, waarnaar u kunt verwijzen op de basispagina.

Dialoogvenster Nieuw account toevoegen, waarin wordt aangegeven dat account niet kan worden geconfigureerd

Wanneer u een pagina van uw website laadt, kunt u de ontwikkelhulpprogramma's van uw webbrowser gebruiken, zoals Internet Explorer 11, om het aantal aanvragen te bekijken dat naar de server is verzonden, evenals de tijd die het laden in beslag nam.

De volgende figuur is het resultaat van het laden van de JavaScript- en CSS-bestanden voordat minification is uitgevoerd.

De groep Getal op het tabblad Start

Na het bundelen van de CSS- en JavaScript-bestanden, is het aantal aanvragen gedaald tot 74 en duurde het slechts iets langer om elk bestand te downloaden dan de afzonderlijke originele bestanden:

Schermafbeelding van 74 items die worden gedownload

Na het bundelen is het JavaScript-bundelbestand aanzienlijk verkleind van 815KB tot 365KB:

Alleen-lezen-instellingen voor inhoudstype

Afbeeldingen bundelen door een afbeeldingssprite te maken

Net als bij het bundelen van uw JavaScript- en CSS-bestanden kunt u veel kleine pictogrammen en andere veelgebruikte afbeeldingen combineren in een groter spriteblad en kunt u vervolgens CSS gebruiken om afzonderlijke afbeeldingen te tonen. In de browser van de gebruiker wordt elke afbeelding nu niet afzonderlijk gedownload, maar wordt het spriteblad ineens gedownload en opgeslagen in het cachegeheugen van de lokale computer. Dit zorgt voor betere prestaties bij het laden van de pagina doordat het aantal downloads en communicatiemomenten met de server worden beperkt.

Een afbeeldingssprite maken in Web Essentials

  1. Selecteer in Visual Studio in Solution Explorer de bestanden die u wilt toevoegen aan de bundel.

  2. Klik met de rechtermuisknop op de geselecteerde bestanden en selecteer vervolgens Web Essentials > Afbeeldingssprite maken in het snelmenu. Bijvoorbeeld:

    Meer pagina's aan uw notitieblokken toevoegen.
  3. Kies een locatie om het spritebestand op te slaan. Het spritebestand is een XML-bestand waarin de instellingen en de bestanden in de sprite worden beschreven. De volgende afbeeldingen laten een voorbeeld zien van een PNG-spritebestand en het bijbehorende XML-bestand .sprite.

    Meerdere diamodellen

    Schermafbeelding van sprite-XML-bestand

Uw Office-vaardigheden uitbreiden
Training verkennen
Als eerste nieuwe functies krijgen
Deelnemen aan Office Insiders

Was deze informatie nuttig?

Bedankt voor uw feedback.

Hartelijk dank voor uw feedback! Het lijkt ons een goed idee om u in contact te brengen met een van onze Office-ondersteuningsagents.

×