Förminskning och sammanslagning i SharePoint Online

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

När du anpassar en 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 fler JavaScript, CSS och bilder ökas antalet HTTP-begäran till servern och det ökar i sin tur tiden det tar för 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örminskning. Med den minskas filernas totala storlek genom att blanksteg och andra tecken som inte behövs tas bort.

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

Du kan använda programvara från tredje part, till exempel Web Essentials, till att slå samman 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. Vill du ladda ned Web Essentials kan du besöka webbplatsen på http://vswebessentials.com/download.

Med Web Essentials får du 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 anpassade element som refereras 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 går du till Solution Explorer och väljer de filer du vill ska ingå i paketet.

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

    Skärmbild med menyalternativen för Web Essentials

Visa resultatet av sammanslagning av JavaScript- och CSS-filer

När du skapar en JavaScript och ett CSS-paket skapas en XML-fil i Web Essentials som kallas för receptfil. Den identifierar JavaScript och CSS-filerna samt en del annan konfigurationsinformation:

Skärmbild av JavaScript och CSS-receptfil

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

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

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

På följande bild visas resultatet av inläsning av JavaScript- och CSS-filer innan förminskning.

Skärmbild som visar 80 objekt som hämtas

Efter sammanslagningen av CSS- och JavaScript-filerna sjönk antalet begäran till 74 och det tog bara något längre tid att ladda ned filerna individuellt än att ladda ned de ursprungliga filerna:

Skärmbild som visar 74 objekt som hämtas

Efter sammanslagningen minskade storleken betydligt på JavaScript-paketfilen från 815 till 365 KB:

Skärmbild av reducerad hämtningsstorlek

Slå samman bilder genom att skapa en bildsprite

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. Istället för att varje enskild bild laddas ned för sig laddas hela 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 kontakter med webbservern minskas.

Skapa en bildsprite i Web Essentials

  1. I Visual Studio går du till Solution Explorer och väljer de filer du vill ska ingå i paketet.

  2. Högerklicka på de markerade filerna och välj Web Essentials > Skapa bildsprite 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

Utöka dina kunskaper
Utforska utbildning
Få nya funktioner först
Anslut till Office Insiders

Hade du nytta av den här informationen?

Tack för din feedback!

Tack för din feedback! Det låter som att det kan vara bra att koppla dig till en av våra Office-supportrepresentanter.

×