Minisering og bunter i SharePoint Online

Denne artikkelen beskriver hvordan du bruker minifiserings- og buntingteknikker med Web Essentials for å redusere antall HTTP-forespørsler og redusere tiden det tar å laste inn sider i SharePoint Online.

Når du tilpasser nettstedet ditt, kan du ende opp med å legge et stort antall ekstra filer til serveren for å støtte tilpasningen. Ved å legge til ekstra JavaScript, CSS og bilder øker antallet HTTP-forespørsler til serveren som igjen øker tiden det tar å vise en nettside. Hvis du har flere filer av samme type, kan du samle disse filene for å gjøre nedlastingen av filene raskere.

For JavaScript og CSS-filer kan du også bruke en fremgangsmåte kalt minifisering, der du reduserer den totale størrelsen på filer ved å fjerne mellomrom og andre tegn som ikke er nødvendig.

Minifisering og bunting av JavaScript og CSS-filer med Web Essentials

Du kan bruke tredjeparts programvare som eksempel Web Essentials til å bunte CSS og JavaScript-filer.

Viktig: Web Essentials er et tredjeparts fellesskapsbasert prosjekt basert på åpen kilde. Programvaren er en utvidelse til Visual Studio 2012 og Visual Studio 2013, og støttes ikke av Microsoft. Hvis du vil laste ned Web Essentials, kan du besøke nettstedet på http://vswebessentials.com/download.

Web Essentials tilbyr to former for bunting:

  • .bundle: for CSS- og JavaScript-filer

  • .sprite: for bilder (bare tilgjengelig i Visual Studio 2013)

Du kan bruke Web Essentials hvis du har en eksisterende funksjon med noen merkeelementer som det refereres til i et egendefinert hoveddokument, for eksempel:

Skjermbilde av er merkeelement i et egendefinert hoveddokument

Slik oppretter du en TE000127218 og CSS-pakke i Web Essentials

  1. I Løsningsutforsker i Visual Studio velger du filene du vil inkludere i pakken.

  2. Høyreklikk på de merkede filene, og velg deretter Web Essentials > Opprett JavaScript-pakkefil på kontekstmenyen. For eksempel:

    Skjermbilde som viser menyalternativer i Web Essentials

Vise resultatene av bunting av JavaScript og CSS-filer

Når du oppretter en JavaScript og CSS-pakke, oppretter Web Essentials en XML-fil som blir kalt en oppskriftsfil som identifiserer både JavaScript og CSS-filer i tillegg til annen konfigurasjonsinformasjon:

Skjermbilde av JavaScript og CSS-fil

I tillegg, hvis minifiseringsflagget er satt til sant i bunting-oppskriften, blir filene redusert i størrelse i tillegg til at de blir buntet sammen. Dette betyr at nye, minifiserte versjoner av JavaScript-filer ble opprettet, som du kan referere til i hoveddokumentet.

Skjermbilde av miniatyrflagget satt til sann

Når du laster inn en side fra nettstedet, kan du bruke utviklingsverktøyene fra nettleseren, som for eksempeld Internet Explorer 11, for å se hvor mange forespørsler som er sent til serveren, og hvor lang tid det tok å laste inn hver fil.

Figuren nedenfor viser resultatet av lasting av JavaScript og CSS-filer før minifisering.

Skjermbilde som viser 80 elementer som lastes ned

Etter bunting av CSS og JavaScript-filer sammen, falt antall forespørsler til 74, og hver fil brukte bare litt lengre tid på å laste ned individuelt enn originalfilene:

Skjermbilde som viser at 74 elementer lastes ned

Etter bunting blir JavaScript-pakkefilen betydelig redusert fra 815 kB til 365 kB:

Skjermbilde som viser redusert nedlastingsstørrelse

Bunting av bilder ved å opprette et sprite-bilde

I likhet med hvordan du buntet JavaScript og CSS-filer, kan du kombinere mange små ikoner og andre vanlige bilder til et større sprite-ark, og deretter bruke CSS for å vise de enkelte bildene. I stedet for å laste ned hvert enkelt bilde, laster brukerens nettleser ned sprite-arket én gang, og bufrer det deretter på den lokale datamaskinen. Dette forbedrer sideinnlastingsytelsen ved å kutte ned på antall nedlastinger og rundturer til nettserveren.

Opprette et sprite-bilde i Web Essentials

  1. Under Løsningsutforsker i Visual Studio velger du filene du vil ta med i pakken.

  2. Høyreklikk på de merkede filene, og velg deretter Web Essentials > Opprett sprite-bilde på kontekstmenyen. For eksempel:

    Skjermbilde som viser hvordan du oppretter en bildesprite
  3. Velg en plassering for å lagre sprite-filen. .sprite-filen er en XML-fil som beskriver innstillingene og filer i spriten. Figurene nedenfor viser et eksempel på en sprite-PNG-fil og den tilhørende .sprite XML-filen.

    Skjermbilde av en sprite-fil

    Skjermbilde av en XML-spritefil

Utvid ferdighetene dine
Utforsk opplæring
Vær først ute med de nye funksjonene
Bli med i Office Insiders

Var denne informasjonen nyttig?

Takk for tilbakemeldingen!

Takk for tilbakemeldingen! Det høres ut som det kan være lurt å sette deg i kontakt med én av våre Office-kundestøtteagenter.

×