Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Bagaimana Mengeksternalisasi dan Mengecilkan JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by wiga (you can also view the original English article)

Salah satu metode yang paling berharga untuk mengoptimalkan kode JavaScript Anda mungkin mengejutkan Anda — melepasnya dari HTML file sama sekali. Dalam video ini dari saya Lapangan The Designer's Guide to optimasi JavaScript, Anda akan belajar bagaimana mengeksternalisasi dan mengecilkan JavaScript.

Bagaimana Mengeksternalisasi dan Mengecilkan JavaScript

Bagaimana Mengeksternalisasi Kode JavaScript

Cara yang bagus untuk meningkatkan efisiensi kode kita adalah dengan eksternalisasi dan meminimalkan kode kita.

Ketika kita berbicara tentang externalizing kode kita, apa yang saya bicarakan adalah mengambil semua JavaScript kami dari halaman HTML kami dan menempatkan bahwa JavaScript ke dalam file JavaScript terpisah, .js file.

Hal ini sangat mudah untuk dilakukan. Anda akan hanya mengambil segala sesuatu di dalam tag script, menghapus, dan kemudian membuat sebuah file teks baru dengan ekstensi .js. Maka Anda hanya akan menggunakan tag script yang menunjuk ke file itu.

Jadi di sini adalah sebuah contoh. Saya memiliki file index.html dengan kode JavaScript di dalamnya. Jadi aku hanya menyoroti segala sesuatu di dalam tag script dan memotongnya.

highlight everything inside the script tags and cut it

Dan kemudian kita dapat menyingkirkan tag script sama sekali dengan menyorot dan menghapus mereka.

get rid of the script tags

Dan kemudian aku akan membuat file JavaScript baru di dalam folder JavaScript saya dan hanya menyebutnya site.js.

Tidak peduli apa editor teks yang Anda gunakan. Saya menggunakan kode Visual Studio di sini, tapi Anda juga dapat menggunakan kurung atau editor teks lainnya. Tapi saya menyimpan itu sebagai site.js, dan saya akan paste semua kode JavaScript yang ke dalamnya.

Sitejs file

Sekarang itu tidak akan bekerja dulu karena kami tidak menunjuk ke JavaScript ini dalam file HTML kami belum.

Tapi kita bisa melompat kembali ke index.html kami. Dan kemudian, setelah kami telah dimuat semua dependensi kami, kami akan membuat kita sendiri tag script untuk memuat file yang kami hanya dibuat.

Jadi dalam kami JavaScript folder js / dan kemudian aku menyebutnya site.js, sehingga kode:

Script code in indexhtml

Itu benar-benar adalah semua yang diperlukan untuk mengeksternalisasi JavaScript Anda.

Bagaimana untuk Mengecilkan Kode JavaScript

Salah satu manfaat besar memiliki JavaScript di file terpisah adalah bahwa Anda dapat kemudian sangat mudah meminimalkan atau mengecilkan kode JavaScript. Dan ketika Anda memiliki versi minified dari kode Anda, yang minified versi pergi untuk menjalankan lebih cepat, karena itu akan menjadi ukuran file yang lebih kecil.

Itu akan sulit untuk membaca atau mengedit file tersebut minified. Itu sebabnya Anda menyimpan salinan asli dari JavaScript sehingga jika Anda perlu untuk membuat perubahan, Anda membuat perubahan pada file JavaScript yang asli, dan kemudian mengecilkan lagi.

Sekarang, bagaimana Anda mengecilkan? Ada beberapa pilihan.

Visual Studio Kode Plugin

Editor kode yang paling modern memiliki plugin yang akan mengecilkan JavaScript untuk Anda. Sebagai contoh, saya menggunakan Visual Studio kode. Jika kita pergi ke extensions kami dan hanya melakukan pencarian untuk "mengecilkan", Anda dapat melihat beberapa pilihan untuk minifying kode Anda.

Visual Studio Code minifying extensions

Kurung Plugin

Editor teks online gratis lainnya yang disebut kurung juga memiliki ekstensi yang dapat Anda gunakan untuk mengecilkan code. Jadi jika Anda pergi ke manajer ekstensi untuk kurung dan melakukan pencarian untuk "mengecilkan", Anda akan melihat JavaScript minifier.

Brackets extensions for minifying code

Perlu diingat bahwa setelah Anda mengecilkan kode Anda, Anda perlu untuk mengubah file yang Anda menunjuk ke dalam HTML file. Jadi jika Anda minified site.js, maka Anda akan memiliki versi baru yang mungkin disebut site.min.js. Dan sehingga dalam HTML Anda, Anda akan ingin untuk menunjuk ke versi minified bukan versi asli dari kode Anda. Jika tidak, Semua minification itu sia-sia

JSCompress

Jika karena alasan tertentu Anda seperti menggunakan notepad untuk melakukan semua kode Anda mengedit, Anda masih dapat mengecilkan, dan salah satu cara Anda dapat melakukannya dengan pergi ke website seperti JSCompress.

Pada dasarnya, ini hanya memungkinkan Anda untuk menyisipkan kode Anda dan kemudian klik pada tombol JavaScript kompres, dan Anda akan melihat bahwa kode kompresi ini kami oleh 74%.

JS code compressed on JSCompress website

Ini adalah hanya sangat kecil sepotong JavaScript di sini, sehingga Anda dapat membayangkan bahwa jika Anda memiliki banyak JavaScript pada halaman Anda, ini akan benar-benar menghemat banyak ukuran file. Dan ketika kau punya situs web lalu lintas tinggi, itu benar-benar akan membantu banyak.

Manfaat Eksternalisasi dan Minifying JavaScript

Salah satu manfaat eksternalisasi dan minifying JavaScript Anda adalah bahwa hal itu memungkinkan Anda untuk menangani caching sedikit lebih baik.

Katakanlah, misalnya, bahwa Anda memiliki sepotong kode JavaScript yang Anda akan menggunakan pada beberapa halaman yang berbeda pada website Anda. Itu akan masuk akal untuk menempatkan bahwa potongan kecil kode JavaScript di sendiri file JavaScript, sehingga setelah pengguna Anda mengunjungi sekali, itu sudah di-cache dalam browser mereka. Kemudian, ketika mereka mengunjungi halaman lain yang menunjuk ke file JavaScript yang sama, tidak memiliki untuk memuat JavaScript itu lagi. Jadi yang akan mengurangi jumlah permintaan yang dibuat untuk bagian tertentu dari JavaScript.

Jika Anda ingin mengambil ini ke tingkat berikutnya, Anda dapat menggunakan Content Delivery Network (CDN) untuk menyimpan versi file JavaScript di beragam geografis lokasi. Jadi Anda mungkin memiliki JavaScript Anda disimpan pada server di seluruh dunia.

Manfaat itu adalah bahwa jika Anda membuat website Anda di Texas dan seseorang di Inggris ingin mengakses situs web Anda, kemudian tanpa CDN, pengguna harus tersambung ke server Anda untuk mendapatkan semua file yang mereka butuhkan.

Tetapi jika JavaScript CDN, maka kemungkinan akan ada versi file JavaScript di server baik di Inggris atau di suatu tempat di Eropa. Sehingga akan lebih dekat ke lokasi pengguna, yang berarti bahwa itu akan men-download lebih cepat dan berjalan lebih lancar.

Perlu diingat bahwa CDN biaya uang, sehingga benar-benar hanya sesuatu yang Anda inginkan untuk mengejar jika Anda siap untuk yang berikutnya. Tapi itu benar-benar dapat membantu untuk mempercepat website Anda.

Watch penuh kursus

Dalam kursus penuh, The Designer's Guide to optimasi JavaScript, Anda akan mempelajari teknik-teknik optimasi lain yang sempurna untuk web designer. Saya akan menunjukkan Anda beberapa mudah-untuk-menerapkan teknik untuk membuat JavaScript Anda, dan dengan demikian website Anda, berjalan lancar.

Anda dapat mengambil kursus ini langsung dengan berlangganan ke elemen Envato. Untuk satu rendah biaya bulanan, Anda mendapatkan akses tidak hanya untuk kursus ini, tetapi juga untuk perpustakaan kami yang berkembang lebih dari 1.000 video kursus dan eBooks industri terkemuka pada Envato Tuts +.

Plus Anda sekarang mendapatkan unlimited download dari perpustakaan elemen Envato besar 460,000 + aset kreatif. Membuat dengan font unik, foto, grafis dan template, dan memberikan proyek-proyek yang lebih baik lebih cepat.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.