Persyaratan: Dalam proyek MVC .NET Framework sebelumnya, JS, CSS dapat dibundel dan dikompresi menggunakan pustaka Microsoft.AspNet.Web.Optimization Microsoft. Setelah menggunakan ASP.NET Core, bagaimana cara menggabungkan dan mengompres file JS dan CSS yang ada?
Proyek .NET Framework mereferensikan hal berikut:
Kode sampel:
Mengikat
Bundling menggabungkan beberapa file menjadi satu file. Bundling mengurangi jumlah permintaan server yang diperlukan untuk merender aset web, seperti halaman web. Anda dapat membuat bundel individual sebanyak yang Anda inginkan khusus untuk CSS, JavaScript, dan lainnya. Lebih sedikit file berarti dari browser ke server atau dari layanan yang menyediakan aplikasiLebih sedikit permintaan HTTP。 Ini meningkatkan performa pemuatan beranda.
Kompres
Kecilkan menghapus karakter yang tidak perlu dari kode Anda tanpa mengubah fungsionalitas. Hasilnya adalahUkuran sumber daya yang diminta, seperti CSS, gambar, dan file JavaScript, berkurang secara signifikan。 Efek samping umum dari minifikasi termasuk mempersingkat nama variabel menjadi satu karakter dan menghapus komentar dan spasi yang tidak perlu. Pada saat yang sama, itu bisaMembingungkan kode, yang tidak kondusif bagi pesaing lain yang membaca kode sumber kami.
Peningkatan performa dari bundling dan kompresi
Tabel berikut menguraikan perbedaan antara memuat aset satu per satu dan menggunakan bundling dan minifikasi:
Ini menghemat lalu lintas dan meningkatkan kecepatan pemuatan dalam hal transportasi jaringan, sekaligus mengurangi permintaan HTTP dan meningkatkan kecepatan pemuatan.
Untuk header permintaan HTTP, browser sangat detail. Saat dibundel, metrik total byte yang dikirim berkurang secara signifikan. Waktu muat menunjukkan peningkatan yang signifikan, tetapi contoh ini berjalan secara lokal. Bundling dan minifikasi dapat dikombinasikan dengan aset yang diangkut melalui jaringan untuk mencapai peningkatan kinerja yang lebih tinggi.
ASP.NET Core tidak memiliki solusi bundel dan terkompresi sendiri, dan perlu menggunakan solusi yang disediakan oleh pihak ketiga, artikel ini menggunakan "LigerShark.WebOptimizer.Core(Perpustakaan akhirnya menelepon.)NUglifyMenerapkan penanganan JS dan CSS), alamat GitHub:Login hyperlink terlihat.
Pertama, buat proyek baru ASP.NET Core 6 dan jalankan perintah berikut untuk mereferensikan:
Buat folder statis baru di proyek wwwroot untuk menyimpan file css dan js uji. Buat file CSS dan JS baru, seperti yang ditunjukkan di bawah ini:
Ubah file Program.cs dan tambahkan layanan WebOptimizer dan middleware, kode utamanya adalah sebagai berikut:
Ketika kami mencoba memulai proyek, kami menemukan bahwa komentar dari kode CSS dan JS telah dihapus, dan file telah dikompresi, dan beberapa variabel di JS telah direduksi menjadi satu huruf, seperti yang ditunjukkan pada gambar di bawah ini:
Kemudian buat file js baru dari folder statis untuk menguji fungsi bundling.Bundel test.js dan test2.js menjadi satu file common.js(dan tidak menghasilkan file fisik common.js), kode konfigurasinya adalah sebagai berikut:
Renderingnya adalah sebagai berikut:
Referensi:
Login hyperlink terlihat.
Login hyperlink terlihat.
|
Dipaparkan pada 2022-3-28 20:55:50
|
|
|
|
Tuan tanah|
Dipaparkan pada 2022-3-28 20:56:47
|
Dipaparkan pada 2022-3-29 00:38:21
|
(Saya tidak tahu cara menghapus komentar duplikat, tolong hapus posting ini ketika webmaster melihatnya)