Minification dan penyertaan dalam SharePoint Online

Penting: Artikel ini diterjemahkan oleh mesin, lihatlah notis penafian. Sila dapatkan versi Bahasa Inggeris artikel ini di sini sebagai rujukan anda

Artikel ini menerangkan cara untuk menggunakan minification dan penyertaan teknik dengan Web Essentials untuk mengurangkan bilangan permintaan HTTP dan mengurangkan masa yang diambil untuk memuatkan halaman SharePoint Online.

Apabila anda menyesuaikan laman web anda, anda boleh berakhir menambahkan bilangan fail tambahan yang besar pada pelayan untuk menyokong penyesuaian yang. Menambah tambahan JavaScript, CSS dan imej meningkatkan bilangan permintaan HTTP ke pelayan yang seterusnya meningkat masa yang diambil untuk memaparkan halaman web. Jika anda mempunyai berbilang fail daripada jenis yang sama, anda boleh membungkus fail ini untuk memuat turun fail ini dengan lebih cepat.

Untuk JavaScript dan fail CSS, anda juga boleh menggunakan pendekatan yang dipanggil minification, tempat anda mengurangkan jumlah saiz fail dengan mengalih keluar ruang kosong dan aksara lain yang tidak diperlukan.

Minification dan penyertaan JavaScript dan fail CSS dengan Web Essentials

Anda boleh menggunakan perisian pihak ketiga seperti Web Essentials untuk membungkus fail CSS dan JavaScript .

Penting: Web Essentials adalah projek pihak ketiga, sumber terbuka, berasaskan komuniti. Perisian ialah sambungan untuk Visual Studio 2012 dan Visual Studio 2013 dan tidak disokong oleh Microsoft. Untuk memuat turun Web Essentials, lawati laman web di http://vswebessentials.com/download.

Web Essentials menawarkan dua bentuk penyertaan:

  • .Bundle: untuk fail CSS dan JavaScript

  • .sprite: untuk imej (hanya tersedia dalam Visual Studio 2013)

Anda boleh menggunakan Web Essentials jika anda mempunyai ciri yang sedia ada dengan beberapa elemen penjenamaan yang dirujuk dalam halaman induk tersuai, seperti:

Petikan skrin bagi unsur jenama dalam halaman induk tersuai

Untuk mencipta pakej TE000127218 dan CSS dalam Web Essentials

  1. Dalam Visual Studio, dalam penjelajah penyelesaian, pilih fail yang anda ingin sertakan dalam pakej yang.

  2. Klik kanan fail yang dipilih dan kemudian pilih Web Essentials > JavaScript mencipta pakej fail daripada menu konteks. Contohnya:

    Petikan skrin menunjukkan opsyen menu Web Essentials

Melihat hasil penyertaan JavaScript dan fail CSS

Apabila anda mencipta JavaScript dan CSS pakej, Web Essentials mencipta fail XML yang dipanggil resipi fail yang mengenal pasti JavaScript dan fail CSS serta beberapa maklumat konfigurasi yang lain:

Petikan skrin JavaScript dan resipi CSS fail

Di samping itu, jika dikecilkan bendera disetkan kepada benar dalam resipi perisian pengikata fail dikurangkan saiz serta diikat bersama-sama. Ini bermakna bahawa baru, minified JavaScript fail versi dicipta yang anda boleh merujuk halaman induk anda.

Petikan skrin bendera dikecilkan disetkan ke benar

Apabila anda memuatkan halaman dari laman web anda, anda boleh menggunakan alat pembangun dari pelayar web anda, seperti Internet Explorer 11, untuk melihat bilangan permintaan yang dihantar kepada pelayan dan mengambil fail setiap tempoh untuk memuatkan.

Rajah berikut adalah hasil memuatkan JavaScript dan fail CSS sebelum minification.

Petikan skrin menunjukkan 80 item sedang dimuat turun

Selepas penyertaan fail CSS dan JavaScript bersama-sama, bilangan permintaan digugurkan untuk 74 dan setiap fail mengambil hanya sedikit lebih panjang daripada fail asal untuk memuat turun secara individu:

Petikan skrin menunjukkan 74 item sedang dimuat turun

Selepas penyertaan, fail pakej JavaScript dikurangkan secara nyata daripada 815 KB untuk 365 KB:

Petikan skrin menunjukkan saiz muat turun dikurangkan

Perisian pengikata imej dengan mencipta imej sprite

Sama seperti cara anda membungkus fail CSS dan JavaScript , anda boleh menggabungkan ikon kecil yang banyak dan imej biasa lain ke dalam helaian sprite lebih besar dan kemudian gunakan CSS untuk mendedahkan imej individu. Selain daripada memuat turun setiap imej individu, pelayar web pengguna memuat turun helaian sprite sekali dan cache pada komputer setempat. Ini meningkatkan prestasi Muatkan halaman dengan memotong ke bawah pada bilangan muat turun dan perjalanan pergi ke pelayan web.

Untuk mencipta imej sprite dalam Web Essentials

  1. Dalam Visual Studio dalam penjelajah penyelesaian, pilih fail yang anda ingin sertakan dalam pakej yang.

  2. Klik kanan fail yang dipilih dan kemudian pilih Web Essentials > mencipta imej sprite daripada menu konteks. Contohnya:

    Petikan skrin menunjukkan cara untuk mencipta imej sprite
  3. Pilih lokasi untuk menyimpan fail sprite. Fail .sprite ialah fail XML yang menerangkan seting dan fail sprite. Rajah berikut menunjukkan contoh fail PNG sprite dan fail XML .sprite yang sepadan.

    Petikan skrin fail sprite

    Petikan skrin fail XML sprite

Nota: Notis Penafian Penterjemahan Mesin: Artikel ini telah diterjemah oleh sistem komputer tanpa campur tangan manusia. Microsoft menawarkan penterjemahan mesin ini untuk membantu pengguna-pengguna yang tidak bertutur dalam Bahasa Inggeris supaya dapat menikmati kandungan mengenai produk, perkhidmatan dan teknologi Microsoft. Artikel ini mungkin mengandungi ralat perbendaharaan kata, sintaks atau tatabahasa kerana ia diterjemahkan oleh mesin.

Kembangkan kemahiran anda
Jelajahi latihan
Dapatkan ciri baru terlebih dahulu
Sertai Office Insiders

Adakah maklumat ini membantu?

Terima kasih atas maklum balas anda!

Terima kasih atas maklum balas anda! Nampaknya ia mungkin akan membantu untuk menyambungkan anda kepada salah seorang daripada ejen sokongan Office kami.

×