Minimizācija un saiņošana pakalpojumā SharePoint Online

Šajā rakstā ir izklāstīts, kā Web Essentials izmantot minimizāciju un saistīšanas metodes, lai samazinātu HTTP pieprasījumu skaitu un arī samazinātu laiku, kāds ir nepieciešams lapu ielādei SharePoint Online.

Pielāgojot tīmekļa vietni, var būt nepieciešams pievienot serverim daudz papildfailu, lai atbalstītu pielāgošanu. Papildu JavaScript, CSS un attēlu pievienošana palielina HTTP pieprasījumu skaitu serverim, kas savukārt palielina laiku, kāds ir nepieciešams tīmekļa lapas attēlošanai. Ja jums ir vairāki viena veida faili, varat tos saistīt, lai šo failu lejupielāde noritētu ātrāk.

JavaScript un CSS failiem varat izmantot pieeju, ko dēvē par minimizāciju, kad tiek samazināts kopējais failu lielums, noņemot liekās baltstarpas un citas rakstzīmes.

JavaScript un CSS failu minimizācija un saistīšana, izmantojot Web Essentials

CSS un JavaScript failu saistīšanai varat izmantot trešo pušu programmatūru, piemēram, Web Essentials.

Svarīgi! : Web Essentials ir trešās puses atvērtā pirmkoda projekts, kura pamatā ir kopiena. Programmatūra ir Visual Studio 2012 un Visual Studio 2013 paplašinājums, to neatbalsta Microsoft. Lai lejupielādētu Web Essentials, dodieties uz tīmekļa vietni http://vswebessentials.com/download.

Web Essentials piedāvā divu veidu saistīšanu:

  • .bundle: paredzēta CSS un JavaScript failiem

  • .sprite: paredzēta attēliem (pieejama tikai Visual Studio 2013)

Varat izmantot Web Essentials, ja jums ir esošs līdzeklis ar zīmola elementiem, uz kuriem ir atsauce pielāgotajā lapu šablonā, piemēram:

eNom-Configure-1-3

TE000127218 un CSS saišķa izveide produktā Web Essentials

  1. Visual Studio risinājumu pārlūkā atlasiet failus, kurus vēlaties iekļaut saišķī.

  2. Ar peles labo pogu noklikšķiniet uz atlasītajiem failiem un pēc tam kontekstizvēlnē atlasiet Web Essentials > Izveidot JavaScript saišķa failu. Piemērs.

    Ekrānuzņēmums, kurā redzamas izvēlnes Web Essentials opcijas

JavaScript un CSS failu saistīšanas rezultātu aplūkošana

Kad izveidojat JavaScript un CSS saišķi, Web Essentials izveido XML failu ar nosaukumu receptes fails, kas identificē JavaScript un CSS failus, kā arī citu informāciju par konfigurāciju:

Ātrās piekļuves rīkjoslas augšējā kreisajā stūrī (noklusējuma atrašanās vieta)

Turklāt, ja samazināšanas atzīme saistīšanas receptē ir iestatīta kā patiesa, tiek samazināts failu lielums un faili tiek saistīti. Tas nozīmē, ka tiek izveidotas jaunas, samazinātas JavaScript failu versijas, uz kurām varat veidot atsauci savā lappušu šablonā.

Dialoglodziņš Jauns konts ar norādi, ka kontu nevarēja konfigurēt

Ielādējot lapu no tīmekļa vietnes, varat izmantot tīmekļa pārlūkprogrammas piedāvātos izstrādātāja rīkus, piemēram, Internet Explorer 11, lai uzzinātu, cik failu tika nosūtīti serverim un cik daudz laika bija nepieciešams katra faila ielādei.

Šajā attēlā ir parādīts JavaScript un CSS failu ielādes rezultāts pirms minimizācijas.

Cilnes Sākums grupa Skaitlis

Pēc CSS un JavaScript failu saistīšanas pieprasījumu skaits tika samazināts līdz 74 un katra atsevišķā faila ielādei bija nepieciešams tikai mazliet vairāk laika par atsevišķu oriģinālo failu ielādi:

Ekrānuzņēmums, kurā redzama 74 vienumu lejupielāde

Pēc saistīšanas JavaScript saišķa faila lielums tika būtiski samazināts no 815 KB līdz 365 KB:

Ekrānuzņēmums, kurā ir parādīts samazināts lejupielādes lielums

Attēlu saistīšana, izveidojot attēla gariņu

Līdzīgi tam, kā saistāt JavaScript un CSS failus, varat apvienot daudzas mazas ikonas un citus bieži sastopamus attēlus lielākā gariņa lapā un pēc tam izmantot CSS, lai atklātu atsevišķus attēlus. Tā vietā, lai lejupielādētu katru atsevišķu attēlu, lietotāja tīmekļa pārlūkprogramma vienreiz lejupielādē gariņa lapu un pēc tam to saglabā vietējā datora kešatmiņā. Tā tiek uzlabota lapas ielādes veiktspēja, samazinot ielādes gadījumu un ciklu skaitu uz tīmekļa serveri.

Attēla gariņa izveide produktā Web Essentials

  1. Visual Studio pārlūkā atlasiet failus, kurus vēlaties iekļaut saišķī.

  2. Ar peles labo pogu noklikšķiniet uz atlasītajiem failiem un pēc tam kontekstizvēlnē atlasiet Web Essentials > Izveidot attēla gariņu. Piemērs.

    Piezīmju grāmatiņām pievienojiet papildu lapas.
  3. Izvēlieties vietu, kur saglabāt gariņa failu. .sprite fails ir XML fails, kas apraksta gariņā esošos iestatījumus un failus. Attēlā tālāk ir parādīts gariņa PNG faila piemērs un tam atbilstošais .sprite XML fails.

    Vairāki slaidu šabloni

    SPRITE XML faila ekrānuzņēmums

Paplašiniet savas prasmes
Iepazīties ar apmācību
Esiet pirmais, kas saņem jaunās iespējas
Pievienoties Office Insider programmai

Vai šī informācija bija noderīga?

Paldies par jūsu atsauksmēm!

Paldies par atsauksmēm! Šķiet, ka varētu būt noderīgi sazināties ar kādu no mūsu Office atbalsta aģentiem.

×