Bundel dan minifikasi aset statis di ASP.NET Core

Oleh Scott Addie dan David Pine

Artikel ini menjelaskan manfaat menerapkan bundling dan minifikasi, termasuk bagaimana fitur-fitur ini dapat digunakan dengan aplikasi web ASP.NET Core.

Apa itu bundling dan minifikasi

Bundling dan minifikasi adalah dua pengoptimalan performa yang berbeda yang dapat Anda terapkan di aplikasi web. Digunakan bersama-sama, bundling dan minifikasi meningkatkan performa dengan mengurangi jumlah permintaan server dan mengurangi ukuran aset statis yang diminta.

Bundling dan minifikasi terutama meningkatkan waktu pemuatan permintaan halaman pertama. Setelah halaman web diminta, browser menyimpan aset statis (JavaScript, CSS, dan gambar). Jadi, bundling dan minifikasi tidak meningkatkan performa saat meminta halaman atau halaman yang sama, di situs yang sama yang meminta aset yang sama. Jika header kedaluwarsa tidak diatur dengan benar pada aset dan jika bundling dan minifikasi tidak digunakan, heuristik kesegaran browser menandai aset kedaluwarsa setelah beberapa hari. Selain itu, browser memerlukan permintaan validasi untuk setiap aset. Dalam hal ini, bundling dan minifikasi memberikan peningkatan performa bahkan setelah permintaan halaman pertama.

Bundling

Bundling menggabungkan banyak file menjadi satu file. Bundling mengurangi jumlah permintaan server yang diperlukan untuk merender aset web, seperti halaman web. Anda dapat membuat sejumlah bundel individual khusus untuk CSS, JavaScript, dll. Lebih sedikit file berarti lebih sedikit permintaan HTTP dari browser ke server atau dari layanan yang menyediakan aplikasi Anda. Ini menghasilkan peningkatan performa pemuatan halaman pertama.

Minification

Minifikasi menghapus karakter yang tidak perlu dari kode tanpa mengubah fungsionalitas. Hasilnya adalah pengurangan ukuran yang signifikan dalam aset yang diminta (seperti file CSS, gambar, dan JavaScript). Efek samping umum dari minifikasi termasuk mempersingkat nama variabel menjadi satu karakter dan menghapus komentar dan spasi kosong yang tidak perlu.

Pertimbangkan fungsi JavaScript berikut:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Minifikasi mengurangi fungsi menjadi berikut:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Selain menghapus komentar dan spasi kosong yang tidak perlu, parameter dan nama variabel berikut diganti namanya sebagai berikut:

Asli	Diganti
imageTagAndImageID	t
imageContext	a
imageElement	r

Dampak bundling dan minifikasi

Tabel berikut menguraikan perbedaan antara memuat aset secara individual dan menggunakan bundling dan minifikasi untuk aplikasi web biasa.

Perbuatan	Tanpa B/M	Dengan B/M	Pengurangan
Permintaan File	18	7	61%
Byte Ditransfer (KB)	265	156	41%
Waktu Pemuatan (ms)	2360	885	63%

Waktu muat ditingkatkan, tetapi contoh ini berjalan secara lokal. Keuntungan performa yang lebih besar diwujudkan saat menggunakan bundling dan minifikasi dengan aset yang ditransfer melalui jaringan.

Aplikasi pengujian yang digunakan untuk menghasilkan angka dalam tabel sebelumnya menunjukkan peningkatan khas yang mungkin tidak berlaku untuk aplikasi tertentu. Sebaiknya uji aplikasi untuk menentukan apakah bundling dan minifikasi menghasilkan waktu muat yang ditingkatkan.

Memilih strategi bundling dan minifikasi

ASP.NET Core kompatibel dengan WebOptimizer, bundling sumber terbuka, dan solusi minifikasi. Untuk menyiapkan instruksi dan contoh proyek, lihat WebOptimizer. ASP.NET Core tidak menyediakan solusi bundling dan minifikasi asli.

Alat pihak ketiga, seperti Gulp dan Webpack, menyediakan otomatisasi alur kerja untuk bundling dan minifikasi, serta pengoptimalan linting dan gambar. Dengan menggunakan bundling dan minifikasi, file minifikasi dibuat sebelum penyebaran aplikasi. Bundling dan minifying sebelum penyebaran memberikan keuntungan dari pengurangan beban server. Namun, penting untuk mengenali bahwa bundling dan minifikasi meningkatkan kompleksitas build dan hanya berfungsi dengan file statis.

Bundling dan minifikasi berbasis lingkungan

Sebagai praktik terbaik, file aplikasi Anda yang dibundel dan dikurangi harus digunakan di lingkungan produksi. Selama pengembangan, file asli mempermudah penelusuran kesalahan aplikasi.

Tentukan file mana yang akan disertakan di halaman Anda dengan menggunakan Pembantu Tag Lingkungan dalam tampilan Anda. Pembantu Tag Lingkungan hanya merender kontennya saat berjalan di lingkungan tertentu.

Tag berikut environment merender file CSS yang tidak diproses saat berjalan di Development lingkungan:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Tag berikut environment merender file CSS yang dibundel dan dikurangi saat berjalan di lingkungan selain Development. Misalnya, menjalankan atau Production Staging memicu penyajian lembar gaya ini:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Sumber Daya Tambahan:

• Menggunakan beberapa lingkungan
• Tag Helper