Artikel ini akan memperkenalkan anda kepada topik yang dikenali sebagai Minify In dan dalam proses juga memberi anda demonstrasi praktikal terperinci. Petunjuk berikut akan dibahas dalam artikel ini,
- Apakah minifikasi?
- Mengapa pengurangan diperlukan?
- Bagaimana anda meminimumkan kod CSS, JS, HTML?
- Bilakah anda mesti berbuat demikian?
- Faedah pengurangan?
Seperti namanya cukup baik, pengurangan adalah mengenai meminimumkan ukuran fail. Dalam pangkalan kod, kita memiliki kebebasan untuk meminimumkan fail HTML, CSS, atau Javascript. Di sini, kita akan membincangkan mengenai meminimumkan fail CSS.
Apabila pembangun membuat kod, dia memastikan bahawa kod tersebut dalam format terbaik yang dapat dibaca untuk mempermudah proses perubahan selanjutnya. Oleh itu, nama-nama pemboleh ubah dalam format yang mudah difahami dan mengandungi banyak watak. Kemudian, mereka juga menambah jarak kosong untuk menjadikannya cukup mudah dibaca.
Tetapi dalam keseluruhan proses, kami cenderung melonggarkan rentetan bahawa saiz fail kami meningkat yang seterusnya meningkatkan masa memuatkan laman web. Terutama dengan laman web yang mempunyai sebahagian besar fungsi dan tambahan, asas kod yang lebih panjang hanya menjadikan laman web lebih teruk.
Bagaimanapun Google mempunyai format yang terbatas untuk memberi peringkat laman web di laman cariannya berdasarkan pengalaman pengguna yang optimum yang disediakan oleh laman web. Lebih baik laman web anda dimuat, semakin baik kedudukan laman web anda di halaman carian.
Dengan banyak yang dipertaruhkan, anda tidak mahu pengguna anda menderita kerana masa memuatkan laman web yang buruk dan beralih ke yang berikutnya. Oleh itu, pengurangan kod sangat penting.
Benar, semasa membina laman web, kita tahu apa yang terdiri daripada asas kod maksimum?
Ini semua mengenai CSS, HTML, dan Javascript. Persaingan hari ini untuk menjadikan laman web anda kelihatan menarik secara visual menekankan fail CSS dan tanpa menyedari kami memanfaatkan laman web kami dengan kod yang berat.
Masuk, pengurangan ..
Teruskan dengan artikel ini mengenai Minify CSS
Apa itu pengurangan ?
Minifikasi membolehkan anda melucutkan kod anda ke ukuran fail minimum yang tidak mempengaruhi kod tersebut namun mengurangkan ukuran fail. Dalam prosesnya, anda boleh membuang jarak dan watak yang tidak perlu yang tidak mempengaruhi keaslian laman web anda. Beberapa perkara yang harus dielakkan dari kodnya adalah:
- Watak ruang kosong
- Watak baris baru
- Hadkan had
- Komen
- Memendekkan nama pemboleh ubah
Faktor-faktor ini tidak terlibat untuk menjadikan laman web anda berjalan sebaliknya menjadikan fail lebih berat dan meningkatkan masa memuatkan laman web.
Keterbacaan kod sepenuhnya tidak termasuk pada apa yang difahami oleh mesin. Penyemak imbas web tidak memerlukan jarak tambahan antara watak untuk difahami dan dijalankan. Oleh itu, cubalah mengurangkannya dan meminimumkan kod CSS dan HTML.
Mari kita ambil contoh:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimumkan CSS saya
Hampir perbezaan 48% dalam fail asal dan dikurangkan. Dikurangkan sebanyak 178 bait. Selepas Minifikasi
#myContent {font-family: Arialfont-size: 90%}Hai dunia!
Teruskan dengan artikel ini mengenai Minify CSS
Kenapa pengurangan diperlukan?
Untuk lebih baik masa memuatkan laman web. Tidak ada yang suka menunggu laman web dimuat mengikut keselesaan. Dengan begitu banyak pilihan yang ada, orang cenderung beralih ke pilihan lain. Jadi, lebih baik mengurangkan saiz fail.
Teruskan dengan artikel ini mengenai Minify CSS
Bagaimanakah kamu kecilkan CSS, JS, kod HTML?
Untuk mengurangkan, terdapat sebilangan besar alat yang tersedia dalam talian yang dapat membantu anda mengurangkan asas kod. Anda juga boleh memilih untuk melakukannya secara manual tetapi untuk pangkalan kod yang lebih besar disarankan untuk menggunakan salah satu alat berikut untuk meminimumkan fail CSS anda:
CSSminifier.com: Alat yang sangat mudah digunakan. Cukup salin kod di sebelah kiri, buat fail yang dikurangkan, dan muat turun. Fail yang diperkecil akan mempunyai lanjutan .min.
Fail CSS yang diperkecilkan anda akan mempunyai demo.min.css pelanjutan.
Smallseotools.com: Sama ada salin kod anda atau muat naik fail kod anda. Ini akan meminimumkan kod anda dan membolehkan anda menyalinnya atau memuat turunnya.
Optimumkan secara automatik: Ini adalah pemalam yang boleh anda tambahkan ke alat WordPress anda. Sebagai pemalam, anda boleh memilih untuk meminimumkan kod CSS anda di sana-sini.
Lebih mudah bagi pembangun untuk memahami kapan fail dikurangkan dan bila tidak. Fail yang diperkecil akan mempunyai lanjutan .min.
Teruskan dengan artikel ini mengenai Minify CSS
Bilakah anda mesti berbuat demikian?
Pengurangan mesti dilakukan terutamanya, apabila anda telah menulis kod dan perlu menghantarnya ke pelayan untuk mendapatkan respons. Setelah fail dikurangkan, versi yang diperkecil digunakan untuk diedarkan kepada pengguna.
Kebaikan dari pengurangan ?
Pengurangan saiz fail: Dengan membuang jarak tambahan, mengurangkan nama pembolehubah, dan membuang komen, saiz fail hampir dikurangkan sebanyak 30-60%. Pemuatan lebih cepat: Dengan data yang lebih sedikit untuk dihantar melalui rangkaian, laman web memuat lebih pantas daripada sebelumnya. Kos lebar jalur yang lebih rendah: Apabila data yang tidak diperlukan dikeluarkan, lebar jalur yang diperlukan jauh lebih rendah dan begitu juga dengan kosnya.
Perkara yang Perlu Diingat:
kelebihan kaedah overloading di java
Bahkan sebelum mencuba pengurangan, pastikan kod anda tidak melebihi had. Aliran tidak boleh terganggu dan fungsinya tetap tidak berwajah. Anda perlu memastikan bahawa walaupun selepas meminimumkan kod anda berjalan dengan cara yang serupa.
Sebenarnya, sebagai amalan terbaik, anda sentiasa boleh menyediakan templat. Buat perubahan anda dalam templat terbina dalam yang akan menjimatkan banyak masa.
Adakah ia serupa dengan pemampatan?
Baiklah, TIDAK. pengecilan berbeza daripada pemampatan. Pemampatan menjadikan fail yang dikurangkan mengurangkan lebih banyak tetapi tidak mempengaruhi gaya dan struktur kod.
Fail dikurangkan dan kemudian dikompres sebagai zip dan dihantar melalui rangkaian apabila pelanggan meminta untuk mengakses laman web. Fail kemudian tidak dikompres dan digunakan.
Contoh:
Sebelum Minifikasi:
Portfolio
- Rumah
Selepas Minifikasi:
Portfolio
- Rumah
Kodnya pasti lebih sukar untuk dibaca dan difahami bagi manusia tetapi juga boleh diterima oleh mesin. Mesin tidak begitu mementingkan keindahan kod dan jarak, ia memahami intinya dan berfungsi dengan sewajarnya.
Cukup terkesan dengan teknik minifikasi?
Kemudian cubalah sendiri. Kurangkan beban fail anda dan biarkan laman web anda mengalir dengan bebas untuk semua pengguna!
Ini membawa kita ke akhir artikel ini mengenai Minify In CSS.
Sekiranya anda berminat untuk mempelajari lebih lanjut mengenai pengembangan web, lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).
Sekiranya anda masih berminat Sekiranya anda mempunyai pertanyaan, anda boleh menghantarnya di bahagian komen blog 'Minify In CSS' ini, dan kami akan menghubungi anda secepat mungkin.