Minimering og bundling i SharePoint Online

I denne artikel beskrives det, hvordan du bruger minification- og bundtningsteknikker sammen med Web Essentials til at reducere antallet af HTTP-anmodninger og reducere den tid, det tager at indlæse sider i SharePoint Online.

Når du tilpasser dit websted, kan ender med at føje et stort antal ekstra filer til serveren for at understøtte tilpasningen. Hvis du tilføjer ekstra JavaScript, CSS og billeder, øges antallet af HTTP-anmodninger til serveren, som igen øger den tid, det tager at få vist en webside. Hvis du har flere filer af samme type, kan du bundte disse filer, så filerne kan downloades hurtigere.

For JavaScript- og CSS-filer kan du også bruge en tilgang, der hedder minification, hvor du reducerer den samlede størrelse af filerne ved at fjerne mellemrum og andre tegn, der ikke er nødvendige.

Minification og bundtning af JavaScript- og CSS-filer med Web Essentials

Du kan bruge tredjepartssoftware som f.eks. Web Essentials til at bundte CSS- og JavaScript-filer.

Vigtigt: Web Essentials er et open source-projekt fra tredjepart, som er communitybaseret. Softwaren er en udvidelse til Visual Studio 2012 og Visual Studio 2013, og Microsoft yder ikke support på softwaren. Hvis du vil downloade Web Essentials, skal du besøge webstedet på http://vswebessentials.com/download.

Web Essentials tilbyder to former for bundtning:

  • .bundle: til CSS- og JavaScript-filer

  • .sprite: til billeder (kun tilgængelig i Visual Studio 2013)

Du kan bruge Web Essentials, hvis du har en eksisterende funktion med nogle brandingelementer, der refereres til i en brugerdefineret masterside, f.eks.:

Skærmbillede af brand-element i brugerdefineret masterside

Sådan opretter du et TE000127218- og CSS-bundt i Web Essentials

  1. I Løsningsoversigt i Visual Studio skal du markere de filer, du vil medtage i bundtet.

  2. Højreklik på de markerede filer, og vælg derefter Web Essentials > Create JavaScript bundle file i kontekstmenuen. Det kunne f.eks. være:

    Skærmbillede med menuindstillingerne i Web Essentials

Visning af resultaterne af bundtning af JavaScript- og CSS-filer

Når du opretter et JavaScript- og CSS-bundt, opretter Web Essentials en XML-fil kaldet en opskriftsfil, der identificerer JavaScript- og CSS-filerne samt nogle andre konfigurationsoplysninger:

Skærmbillede af JavaScript- og CSS-opskriftfil

Derudover, hvis flaget for minify er angivet til sand i bundtningens opskrift, reduceres filernes størrelse og de bundtes sammen. Det betyder, at der er oprettet nye "minificerede" versioner af JavaScript-filerne, som du kan henvise til på din masterside.

Skærmbillede af formindskelse af flag indstillet til sand

Når du indlæser en side fra dit websted, kan du bruge udviklingsværktøjerne via din webbrowser, f.eks. Internet Explorer 11, for at få vist antallet af anmodninger, der er sendt til serveren, og hvor lang tid det har taget at indlæse hver fil.

Følgende figur er resultatet af indlæsningen af JavaScript- og CSS-filer før minificering.

Skærmbillede med 80 elementer der hentes

Efter bundtningen af CSS- og JavaScript-filer sammen, faldt antallet af anmodninger til 74, og det tog kun lidt længere tid end for de oprindelige filer at downloade hver fil enkeltvis:

Skærmbillede med 74 elementer der hentes

Efter bundtningen reduceres JavaScript-bundtfilen væsentligt fra 815 KB 365 KB:

Skærmbillede, der viser reduceret overførselsstørrelse

Bundtning af billeder ved oprettelse af et billede-sprite

Ligesom du kan bundte JavaScript- og CSS-filer, kan du kombinere mange små ikoner og andre almindelige billeder til et større sprite-ark og derefter bruge CSS til at få vist de enkelte billeder. I stedet for at downloade hvert enkelt billede, downloader brugerens webbrowser sprite-arket én gang og cachelagrer det på den lokale computer. Dette forbedrer siden indlæsningshastighed ved at skære ned på antallet af downloads og ture til webserveren.

Opret et billede-sprite i Web Essentials

  1. I Løsningsoversigt i Visual Studio skal du markere de filer, du vil medtage i bundtet.

  2. Højreklik på de markerede filer, og vælg derefter Web Essentials > Create image sprite i kontekstmenuen. Det kunne f.eks. være:

    Skærmbillede, der viser, hvordan du opretter et billedsprite
  3. Vælg en placering, hvor du vil gemme spritefilen. .sprite-filen er en XML-fil, der beskriver indstillingerne og filerne i spriten. De følgende figure viser et eksempel på en PNG-spritefil og dens tilsvarende .sprite-XML-fil.

    Skærmbillede af en sprite-fil

    Skærmbillede af sprite-XML-fil

Udvid dine færdigheder
Gå på opdagelse i kurser
Få nye funktioner først
Bliv Office Insider

Var disse oplysninger nyttige?

Tak for din feedback!

Tak for din feedback! Det lyder, som om det vil kunne hjælpe, hvis du bliver sat i forbindelse med en af vores Office-supportteknikere.

×