Förgrening och sammanslagning i SharePoint Online

I den här artikeln beskrivs hur du använder teknik förgrening och sammanslagning med Web Essentials för att minska antalet HTTP-begäran och för att minska tiden det tar att läsa in sidor i SharePoint Online.

När du anpassar din webbplats kan det leda till att du lägger till ett stort antal extra filer till servern för att stödja anpassningen. När du lägger till extra JavaScript, CSS och bilder ökar antalet HTTP-begäranden till servern och det ökar i sin tur tiden det tar att visa en webbsida. Om du har flera filer av samma typ kan du samla dem i paket så att de kan laddas ned snabbare.

För JavaScript- och CSS-filer kan du också använda en metod som kallas för minskning, där du minskar den totala storleken på filer genom att ta bort blanksteg och andra tecken som inte behövs.

Förgrening och sammanslagning av JavaScript- och CSS-filer med Web Essentials

Du kan använda programvara från tredje part, till exempel Web Essentials, för att samla CSS- och JavaScript-filer.

Viktigt

Web Essentials är ett community-baserat projekt från tredje part med öppen källkod. Programvaran är ett tillägg till Visual Studio 2012 och Visual Studio 2013 och stöds inte av Microsoft. Om du vill ladda ned Web Essentials kan du besöka webbplatsen på https://vswebessentials.com/download.

Web Essentials erbjuder två typer av sammanslagning:

  • .bundle: för CSS- och JavaScript-filer
  • .sprite: för bilder (endast tillgängligt i Visual Studio 2013)

Du kan använda Web Essentials om du har en befintlig funktion med vissa varumärkeselement som refereras till på en anpassad huvudsida, till exempel:

Skärmbild av märkeselement på anpassad huvudsida.

Skapa TE000127218- och CSS-paket i Web Essentials

  1. I Visual Studio i Solution Explorer väljer du de filer som du vill ta med i paketet.

  2. Högerklicka på de markerade filerna och välj Web Essentials > Skapa JavaScript-paketfil på snabbmenyn. Till exempel:

    Skärmbild som visar menyalternativen för Web Essentials.

Visa resultat för sammanslagning av JavaScript- och CSS-filer

När du skapar ett JavaScript- och CSS-paket skapar Web Essentials en XML-fil som kallas receptfil som identifierar JavaScript- och CSS-filer samt annan konfigurationsinformation:

Skärmbild av JavaScript och CSS-receptfil.

Om flaggan för förmining dessutom är inställd på Sant i sammanslagningsreceptet förminskas filerna samtidigt som de samlas. Det innebär att nya, minrifierade versioner av JavaScript-filerna har skapats som du kan referera till på huvudsidan.

Skärmbild av flaggan för förmining inställd på sant.

När du läser in en sida från din webbplats kan du använda utvecklingsverktygen i webbläsaren, till exempel Internet Explorer 11, för att se antalet förfrågningar som skickas till servern och hur lång tid det tog för varje fil att läsas in.

Följande bild visar resultatet av inläsning av JavaScript- och CSS-filer innan förgreningen.

Skärmbild som visar 80 objekt som hämtas.

Efter sammanslagningen av CSS- och JavaScript-filerna minskade antalet begäranden till 74 och det tog bara något längre tid för varje fil att ladda ned dem individuellt än de ursprungliga filerna:

Skärmbild som visar 74 objekt som hämtas.

Efter sammanslagningen minskar JavaScript-paketfilen avsevärt från 815 KB till 365 KB:

Skärmbild som visar reducerad nedladdningsstorlek.

Sammanslagning av bilder genom att skapa en bild-sprite

På ungefär samma sätt som när du slår samman JavaScript- och CSS-filer kan du samla flera små ikoner och andra vanliga bilder i en större sprite och sedan visa de enskilda bilderna med CSS. I stället för att varje enskild bild laddas ned laddas sprite-arket ned på en gång i användarens webbläsare och cachelagras på den lokala datorn. Det förbättrar prestanda för sidinläsning genom att antalet nedladdningar och tur och returresor till webbservern klipps ned.

Skapa en bild-sprite i Web Essentials**

  1. I Visual Studio i Solution Explorer väljer du de filer som du vill ta med i paketet.

  2. Högerklicka på de markerade filerna och välj Web Essentials > Skapa bild-sprite på snabbmenyn. Till exempel:

    Skärmbild som visar hur du skapar en bild-sprite.

  3. Välj en plats där sprite-filen ska sparas. .sprite-filen är en XML-fil som beskriver inställningarna och filerna i sprite-filen. På följande bilder visas ett exempel på en PNG-spritefil och den motsvarande XML-filen .sprite.

    Skärmbild av en sprite-fil.

    Skärmbild av sprite-XML-fil.