{"id":2171,"date":"2015-03-26T03:24:49","date_gmt":"2015-03-26T03:24:49","guid":{"rendered":"http:\/\/blog.jaringanhosting.com\/?p=2171"},"modified":"2015-03-26T13:20:15","modified_gmt":"2015-03-26T13:20:15","slug":"asp-net-hosting-tutorial-jaringanhosting-com-cara-menggunakan-fitur-bundling-and-minification-pada-asp-net-4-5","status":"publish","type":"post","link":"https:\/\/blog.jaringanhosting.com\/index.php\/asp-net-hosting-tutorial-jaringanhosting-com-cara-menggunakan-fitur-bundling-and-minification-pada-asp-net-4-5\/","title":{"rendered":"ASP.NET Hosting Tutorial – JaringanHosting.com :: Cara Menggunakan Fitur “Bundling and Minification” pada ASP.NET 4.5"},"content":{"rendered":"

Pada artikel kali ini, saya akan membagikan\u00a0kepada Anda sekalian mengenai\u00a0cara menggunakan Fitur “Bundling and Minification” yang terdapat pada ASP.NET 4.5<\/strong>. Seperti yang telah diketahui, kinerja aplikasi web Anda memiliki dampak yang besar pada user\u00a0web Anda. Jika aplikasi web Anda lambat, jelas user\u00a0akan berpaling untuk menggunakannya. Ada banyak faktor yang berkontribusi terhadap kinerja sebuah situs web. Beberapa hal penting tersebut \u00a0mencakup jumlah permintaan yang dikirim dari browser ke server dan ukuran respon setiap permintaan. Fitur optimasi baru yang ditambahkan pada ASP.NET 4.5<\/a> menyediakan cara yang rapi untuk menggabungkan serta mengkompres\u00a0JavaScript dan CSS file untuk\u00a0mengatasi permasalahan yang sebelumnya telah dibahas. Artikel ini menunjukkan bagaimana fitur bundling and\u00a0minification dari ASP.NET dapat dimanfaatkan dalam aplikasi web Anda.<\/p>\n

Standar Bundling and\u00a0Minification<\/h4>\n

ASP.NET 4.5 menyediakan dukungan inbuilt untuk menggabungkan dan memperkecil file. Fungsi inti\u00a0bundling dan minification ditemukan di System.Web.Optimization namespace. Jika Anda membuat proyek yang ASP.NET baru, Anda akan menemukan baris kode berikut dalam file Global.aspx:<\/p>\n

protected void Application_Start()\r\n{\r\n    ...\r\n    BundleTable.Bundles.RegisterTemplateBundles();\r\n}<\/pre>\n
Seperti yang Anda lihat, event handler Application_Start berisi panggilan ke RegisterTemplateBundles (), metode yang melakukan standar bundling dan minification untuk Anda. Agar standar\u00a0bundling dan minification bekerja, Anda perlu menentukan URL dari JavaScript dan CSS file yang sedikit berbeda.<\/p>\n
 <script type=\"text\/javascript\" src=\"..\/..\/Scripts\/js\"><\/script><\/pre>\n
Perhatikan tag <script> tag di atas dengan hati-hati. Alih-alih menentukan tag <script> per file hanya ada satu tag <script> dan atribut src adalah dalam bentuk <script_folder_path> \/ js. Konvensi penamaan ini memberitahu ASP.NET bahwa semua * Js file dari folder Scripts harus dibundel atau digabungkan bersama-sama dan diperkecil. Jika Anda mengamati permintaan di Chrome Developer Tools, Anda akan menemukan hanya satu entri untuk file JavaScript seperti ini:<\/p>\n
\"Minification_image002\"<\/a><\/p>\n
Coba perhatikan ukuran download konten dan bandingkan\u00a0dengan ukuran gabungan dari file individual.<\/p>\n
Untuk file CSS, Anda dapat\u00a0menggunakan <css_folder_path> \/ css di <link> tag.<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"..\/..\/Content\/css\" \/><\/pre>\n
Meskipun sintaks yang ditunjukkan di atas bekerja seperti yang diharapkan tetapi ada kelemahan kecil jika diperhatikan. Katakan jika Anda merujuk JavaScript dan CSS file dalam pandangan Anda menggunakan sintaks di atas dan aplikasi web Anda mulai melayani permintaan. Beberapa waktu kemudian Anda memperbarui beberapa ini JavaScript dan CSS file. Tentu, Anda mengharapkan script baru ini akan berjalan. Namun, file sebelumnya mungkin telah di-cache oleh browser atau server proxy. Karena URL ke file yang sama (src = “..\/..\/ Script \/ js” dan href = “..\/..\/ Content \/ css”), maka tidak ada cara untuk browser untuk mendeteksi apakah file telah diubah atau tidak. Untuk memperbaiki masalah disarankan untuk menggunakan sintaks berikut:<\/p>\n
<script src=\"<%= BundleTable.Bundles.ResolveBundleUrl(\"~\/Scripts\/js\") %>\"><\/script>\r\n<script src=\"<%= BundleTable.Bundles.ResolveBundleUrl(\"~\/Content\/css\") %>\"><\/script><\/pre>\n
Metode ResolveBundleUrl ()\u00a0menerima jalur virtual folder yang berisi skrip atau CSS file. Metode ini tidak hanya menghasilkan URL untuk src dan atribut href tetapi juga menambahkan tanda string unik dalam string. Token ini berubah ketika file berubah, sehingga memastikan URL unik untuk file yang berubah. Gambar berikut menunjukkan bagaimana token string yang ditambahkan dalam string:<\/p>\n
\"Minification_image003\"<\/a><\/p>\n
Kostumisasi Bundling and Minification<\/h4>\n
Pada suatu saat mungkin mekanisme bundling standar tidak memenuhi kebutuhan Anda. Sebagai contoh, Anda mungkin memiliki sepuluh file JavaScript dalam sebuah folder dan\u00a0Anda yang ingin membundel file tersebut\u00a0dalam dua bundel terpisah yang terdiri dari lima file masing-masing pada sebuah bundel. Atau Anda mungkin ingin untuk membundel file dalam urutan tertentu berdasarkan dependensi mereka. Kustomisasi seperti itu sangat mungkin dilakukan melalui Bundle class. Kode akan ditambahkan ke event handler Application_Start dan\u00a0menunjukkan bagaimana kelas Bundle dapat digunakan:<\/p>\n
protected void Application_Start()\r\n{\r\n    ...\r\n    var bundle = new Bundle(\"~\/MyScripts\");\r\n    bundle.AddFile(\"~\/Scripts\/jquery-1.6.2.js\");\r\n    bundle.AddFile(\"~\/Scripts\/jquery-ui-1.8.11.js\");\r\n    bundle.AddFile(\"~\/Scripts\/modernizr-2.0.6-development-only.js\");\r\n    BundleTable.Bundles.Add(bundle);\r\n    ...\r\n}<\/pre>\n
Kode di atas menciptakan bundel baru untuk virtual path ~ atau MyScripts. Kemudian memanggil AddFile () untuk menambahkan file script khusus. Akhirnya, bundel baru yang dibuat akan ditambahkan ke koleksi Berkas. Untuk merujuk pada bundel baru yang Anda buat, maka disarankan menggunakan sintaks berikut:<\/p>\n
<script\r\nsrc=\"<%= BundleTable.Bundles.ResolveBundleUrl(\"~\/MyScripts\")\r\n%>\"><\/script><\/pre>\n
Selain menciptakan kostumisasi bundel\u00a0seperti yang ditunjukkan di atas, Anda juga dapat menyesuaikan proses bundling dan minification keseluruhan. Untuk melakukannya, Anda perlu membuat kelas kustom yang mengimplementasikan IBundleTransform interface. Kemudian Anda\u00a0perlu untuk mengimplementasikan Proses () dalam IBundleTransform interface dan menulis logika pengolahan kustom. Kode berikut menunjukkan implementasi sederhana dari interface IBundleTransform yang menambahkan pemberitahuan hak cipta dengan isi paket\/bundel:<\/p>\n
public class MyBundleTransform:IBundleTransform\r\n{\r\n    public void Process(BundleContext context, BundleResponse response)\r\n    {\r\n        StringBuilder sb = new StringBuilder();\r\n        sb.AppendLine(\"\/\/ Copyright (C) 2012. All rights reserved.\");\r\n        sb.Append(response.Content);\r\n        response.Content = sb.ToString();\r\n    }\r\n}<\/pre>\n
Kode di atas menciptakan kelas MyBundleTransform, yang mengimplementasikan interface IBundleTransform. Proses () menerima dua parameter yaitu. a BundleContext dan BundleResponse. Proses () \u00a0kemudian menambahkan pemberitahuan hak cipta di atas isi bundel\u00a0dan kemudian kembali memberikan Content property. Anda juga bisa mengelola\u00a0file bundel individu Anda menggunakan\u00a0respons File property.<\/p>\n
Untuk menggunakan MyBundleTransform class, Anda perlu mengubah Application_Start event handlersebagai berikut:<\/p>\n
protected void Application_Start()\r\n{\r\n    ...\r\n var bundle = new Bundle(\"~\/MyScripts\", new MyBundleTransform());     bundle.AddFile(\"~\/Scripts\/jquery-1.6.2.js\");\r\n    bundle.AddFile(\"~\/Scripts\/jquery-ui-1.8.11.js\");\r\n    bundle.AddFile(\"~\/Scripts\/modernizr-2.0.6-development-only.js\");\r\n    BundleTable.Bundles.Add(bundle);\r\n    ...\r\n}<\/pre>\n
Seperti yang Anda lihat, bundel baru telah selesai dibuat seperti sebelumnya, umpamanya MyBundleTransform class dilewatkan sebagai parameter kedua konstruktor. Jika Anda amati script yang dihasilkan dalam Developer Tools Chrome, Anda akan menemukan baris\u00a0“copyright” ditambahkan di bagian atas:<\/p>\n
\"Minification_image004\"<\/a>Seperti yang telah disampaikan sebelumnya, fitur bundling and minification merupakan fitur baru yang ditambahkan dari ASP.NET 4.5<\/a> yang memudahkan untukAnda untuk membundel atau menggabungkan JavaScript dan CSS file, dengan demikian hal tersebut dapat meningkatkan kinerja keseluruhan aplikasi web Anda. Untuk memanfaatkan fitur bundling and minification,\u00a0yang Anda butuhkan adalah menentukan URL script dan CSS file dengan cara tertentu. Setelah konvensi penamaan ini, otomatis bundel semua JavaScript dan CSS file dari folder akan\u00a0berfungsi sebagai satu permintaan. Anda juga dapat menyesuaikan proses bundling menggunakan Bundle class dan IBundleTransform interface.<\/p>\n
Bagaimana? Apakah Anda sudah berhasil melakukan bundel terhadap file Anda\u00a0menggunakan Fitur “Bundling and Minification” yang terdapat pada ASP.NET<\/strong> 4.5<\/strong>?\u00a0<\/strong>Semoga artikel ini bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pada artikel kali ini, saya akan membagikan\u00a0kepada Anda sekalian mengenai\u00a0cara menggunakan Fitur “Bundling and Minification” yang terdapat pada ASP.NET 4.5. Seperti yang telah diketahui, kinerja aplikasi web Anda memiliki dampak yang besar pada user\u00a0web Anda. Jika aplikasi web Anda lambat,<\/p>\n","protected":false},"author":6456,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/2171"}],"collection":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/users\/6456"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/comments?post=2171"}],"version-history":[{"count":0,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/2171\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/media?parent=2171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/categories?post=2171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/tags?post=2171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}