What is Bundling and Minification in ASP.NET MVC

Posted at : Nov/02/2016
3576 Views | 0 Comments

Bundling dan Minification merupakan fitur yang digunakan untuk mengelompokan beberapa file css atau file javasrcipt menjadi satu file yang sudah di ubah ukurannya menjadi lebih kecil. Hal tersebut akan mempengaruhi performance browser client dalam download file css atau file javascript yang digunakan dalam sebuah halaman web.

Apa sebenarnya yang terjadi dalam proses bundling dan minification tersebut? Mari kita lihat simulasinya.

1. Buat sebuah project asp.net mvc.

2. Buka file _Layout.cshtml dan perhatikan pada gambar dibawah ini yang diberi warna kotak merah :

Di dalam file tersebut terdapat perintah Render untuk styles dan scripts dimana masing-masing perintah tersebut merujuk kepada sebuah nama bundles yang di definisikan di dalam file App_Start/BundleConfig.cs

3. Buka file App_Start/BundleConfig.cs dan perhatikan kode yang diberi warna kotak merah :

Kode yang terdapat di dalam file diatas mendefinisikan nama-nama bundles yang ditujukan untuk mengelompokan satu atau beberapa file css atau javascript menjadi kedalam satu file dimana ukurannya diubah menjadi lebih kecil karena adanya penghilangan whitespace, dan penamaan fungsi menjadi lebih pendek.

4. Jalankan project tersebut dan klik kanan halaman utamanya kemudian pilih view source :

Dalam kotak merah tersebut dapat kita lihat terdapat 2 file css dari bundling content/css dan 1 file javascript dari bundling bundles/modernizr. Hasil diatas sebenarnya belum memperlihatkan hasil dari proses bundling dan minification karena project web tersebut masih berada dalam keadaan setting debug bernilai true.

5. Ubah setting debug menjadi false di dalam file web.config lalu browse kembali halaman utamanya dan lihat kembali view source nya :

Sekarang hasilnya dapat dilihat bahwa kedua file css yang di definisikan di dalam bundles diubah menjadi satu file dan link nya juga berubah, begitu juga untuk file javascript. Apabila di klik salah satu link yang terdapat di dalam kotak merah diatas hasilnya dapat dilihat pada gambar dibawah ini :

Hasil dari proses minification menjadikan konten file css atau file javascript menjadi baris tanpa adanya whitespace yang tidak diperlukan, begitu juga beberapa nama fungsi mengalami perubahan nama menjadi lebih pendek.


InfoEbook-ebook yang tersedia yang dapat dipesan secara langsung atau melalui google play store.



[Comments]


[Write your comment]

Name (required)

Email (required-will not published)

 
Comment
7518
Input code above below (Case Sensitive) :

ABOUT ME

Rully Yulian MF
Rully Yulian Muhammad Firmansyah | Founder & IT Trainer Native Enterprise | MCT (2008-2019) | MVP (2009-2016) | Xamarin Certified Professional | MTA | MCAD | MCPD | MOS | Bandung, West Java, Indonesia.

[Read More...]

TOP DOWNLOAD

Mapping Hak Akses User Pada MenuStrip Sampai Control Button
downloaded 6918 times

Bagaimana caranya menginstal database ketika deploying sebuah aplikasi?
downloaded 4874 times

Simple Voice Engine Application With Sound Player Class...
downloaded 4012 times

Change Group,Sort Order, Filtering By Date in Crystal Reports
downloaded 3455 times

WinForms DataGrid Paging With SqlDataAdapter
downloaded 2869 times


LINKS

CERTIFICATIONS

Xamarin Certified
MOS 2007
MCT
MCPD
MCTS
MCAD.NET
ASP.NET Brainbench

NATIVE ENTERPRISE

Native Enterprise - IT Training

FOLLOW ME

Youtube  Facebook  Instagram  LinkedIn   Twitter

RSS


HOSTED BY

www.erudeye.net

NATIVE ENTERPRISE NEWS

© Copyright 2006 - 2021   Rully Yulian MF   All rights reserved.