Minifikasi dan pembundelan di SharePoint Online

Artikel ini menguraikan cara menggunakan teknik pengecilan dan pembundelan dengan Web Essentials untuk mengurangi jumlah permintaan HTTP dan mengurangi waktu yang dibutuhkan untuk memuat halaman di SharePoint Online.

Saat mengustomisasi situs web, Anda mungkin menambahkan file tambahan dalam jumlah besar ke server untuk mendukung kustomisasi. Menambahkan JavaScript, CSS, dan gambar lain meningkatkan jumlah permintaan HTTP ke server sehingga akhirnya akan menambah waktu yang dibutuhkan untuk menampilkan halaman web. Jika memiliki beberapa file bertipe sama, Anda dapat membundelnya agar pengunduhan file menjadi lebih cepat.

Untuk file CSS dan JavaScript, Anda juga dapat menggunakan pendekatan yang disebut pengecilan, yaitu mengurangi ukuran file total dengan menghapus spasi kosong dan karakter lain yang tidak terlalu diperlukan.

Pengecilan serta pembundelan file CSS dan JavaScript dengan Web Essentials

Anda dapat menggunakan perangkat lunak pihak ketiga seperti Web Essentials untuk membundel file JavaScript dan CSS.

Penting: Web Essentials adalah proyek pihak ketiga yang bersifat sumber terbuka dan berbasis pada komunitas. Perangkat lunak ini merupakan pengembangan untuk Visual Studio 2012 dan Visual Studio 2013, serta tidak didukung oleh Microsoft. Untuk mengunduh Web Essentials, kunjungi situs webnya di http://vswebessentials.com/download.

Web Essentials menawarkan dua bentuk pembundelan:

  • .bundle: untuk file JavaScript dan CSS

  • .sprite: untuk gambar (hanya tersedia di Visual Studio 2013)

Anda dapat menggunakan Web Essentials jika memiliki fitur yang ada dengan beberapa elemen merek yang direferensikan dalam halaman utama kustom, seperti:

Cuplikan layar elemen merek di halaman master kustom

Untuk membuat bundel TE000127218 dan CSS di Web Essentials

  1. Di Visual Studio, di Penjelajah Solusi, pilih file yang ingin Anda sertakan dalam bundel.

  2. Klik kanan file yang dipilih, lalu pilih Web Essentials > Buat file bundel JavaScript dari menu konteks. Sebagai contoh:

    Cuplikan layar memperlihatkan opsi menu Web Essentials

Menampilkan hasil pembundelan file CSS dan JavaScript

Saat membuat bundel JavaScript dan CSS, Web Essentials membuat file XML, disebut file resep, yang mengidentifikasi file JavaScript dan CSS serta beberapa informasi konfigurasi lainnya:

Cuplikan layar file tanda terima JavaScript dan CSS

Selain itu, jika bendera pengecilan diatur ke true dalam resep pembundelan, file akan diperkecil ukurannya dan dibundel bersama. Artinya, versi file JavaScript baru dan yang sudah diperkecil telah dibuat dan dapat direferensikan di halaman master Anda.

Cuplikan layar bendera minify diatur ke true

Saat memuat halaman dari situs web, Anda dapat menggunakan alat pengembang dari browser web, seperti Internet Explorer 11, untuk melihat jumlah permintaan yang dikirim ke server dan berapa lama setiap file akan dimuat.

Gambar berikut ini adalah hasil dari pemuatan file CSS dan JavaScript sebelum pengecilan.

Cuplikan layar memperlihatkan 80 item sedang diunduh

Setelah membundel file JavaScript dan CSS bersama, jumlah permintaan berkurang hingga 74 dan setiap file hanya sedikit lebih lama diunduh daripada harus mengunduh file aslinya satu per satu:

Cuplikan layar memperlihatkan 74 item sedang diunduh

Setelah pembundelan, ukuran file bundel JavaScript berkurang secara signifikan dari 815KB menjadi 365KB:

Cuplikan layar memperlihatkan ukuran unduhan yang berkurang

Membundel gambar dengan membuat sprite gambar

Sama seperti cara membundel file JavaScript dan CSS, Anda dapat menggabungkan banyak ikon kecil dan gambar umum lainnya menjadi lembar sprite yang lebih besar, lalu menggunakan CSS untuk memunculkan setiap gambar. Tidak perlu mengunduh setiap gambar satu per satu, browser web pengguna mengunduh lembar sprite sekaligus dan meletakkannya dalam cache di komputer lokal. Hal ini meningkatkan kinerja pemuatan halaman dengan membatasi jumlah unduhan dan komunikasi dua arah ke server web.

Untuk membuat sprite gambar di Web Essentials

  1. Di Visual Studio, di Penjelajah Solusi, pilih file yang ingin Anda sertakan dalam bundel.

  2. Klik kanan file yang dipilih, lalu pilih Web Essentials > Buat sprite gambar dari menu konteks. Sebagai contoh:

    Cuplikan layar memperlihatkan cara membuat sprite gambar
  3. Pilih lokasi untuk menyimpan file sprite. File .sprite adalah file XML yang menguraikan pengaturan dan file dalam sprite. Gambar berikut ini memperlihatkan contoh file PNG sprite dan file XML .sprite yang terkait.

    Cuplikan file sprite

    Cuplikan layar file sprite XML

Kembangkan keterampilan Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×