ffCCBot/2.0 (http://commoncrawl.org/faq/)
Update: 24-08-2016

Menggabungkan File Javascript Pada WordPress Menjadi Satu File

Melanjutkan pembahasan sebelumnya tentang cara menggabungkan file CSS pada WordPress, kali ini kita akan membahas cara menggabungkan file javascript pada wordpress menjadi satu file.

Proses ini merupakan bagian dari optimasi HTTP request untuk meningkatkan kecepatan akses website yang telah kita bahas pada artikel sebelumnya: Optimasi HTTP Request Untuk Mempercepat Loading Website

I. Menggabungkan File Javascript Pada WordPress Menjadi Satu File – Cara Manual

Cara konvensional menggabungkan file javascript pada wordpress dilakukan dengan melihat source dari halaman web, mencari (Ctrl+F) file javascript dengan kata kunci “javascript”, kemudian memindahkan (copy-paste) script tersebut ke sebuah file javascript yang baru.

Cara ini sangat tidak disarankan karena banyak sekali kelemahannya, seperti:

  • Sulit untuk mencari nama handle dari file javascript. Tidak seperti pada file css, dimana nama handle tertulis pada atribut id. Handle ini nantinya akan digunakan untuk menderegister file javascript tersebut.
  • Tidak fleksibel, dimana jika ada penambahan atau pengurangan file, kita harus menyusun ulang gabungan file tersebut.
  • Dependency antar file tidak bisa dipastikan berjalan dengan baik. Hal ini terkait urutan file javascript saat proses penggabungan.

II. Menggabungkan File Javascript Pada WordPress Menjadi Satu File – Cara Otomatis

Mari kita tinggalkan cara manual dan beralih ke cara yang lebih elegan.

Untuk menggabungkan file javascript pada wordpress terlebih dahulu kita HARUS mengetahui semua file beserta nama handle– nya yang diload pada suatu halaman, TANPA melihat source web seperti yang kita lakukan pada cara manual.

1 Mengetahui semua file javascript yang di load

Semua informasi tentang file javascript yang diload oleh wordpress berada pada class WP_Scripts yang disimpan pada variabel $wp_scripts, variabel ini dapat dipanggil di hook mana saja, seperti pada wp_headwp_print_scripts sudah diganti dengan wp_enqueue_scripts, wp_footer, init, dll

Masing masing hook memberikan hasil yang berbeda tergantung dari bagaimana cara developer meload file javascript yang mereka gunakan.

Yang jelas, hanya ada dua lokasi tempat dimana file javascript terebut di load yaitu:

  1. Pada header ( tag <head> ), yang dapat diketahui dengan menggunakan hook: wp_head. Hook ini dijalankan sebelum tag <body> di load.
  2. Pada footer sebelum tag </body>, yang dapat diketahui dengan menggunakan hook: wp_footer . Hook ini dijalankan setelah content body di load

Sobat dapat mencobanya dengan membuka file functions.php yang berada pada folder theme yang sedang digunakan, misal: wp-content/themes/jagowebdev/functions.php, kemudian copy paste kode berikut:

add_action( 'wp_head', 'show_head_scripts', 9999 );
add_action( 'wp_footer', 'show_footer_scripts', 9999 );

// Muncul di bagian paling atas, sebelum header web
function show_head_scripts(){
	global $wp_scripts;
	echo '<pre>'; print_r($wp_scripts->done);
}
// Muncul dibagian paling bawah halaman web (setelah footer)
function show_footer_scripts(){
	global $wp_scripts;
	echo '<pre>'; print_r($wp_scripts->done);
}

Buka salah satu halaman web untuk melihat hasilnya

2 Menggabungkan file javascipt pada wordpress menjadi satu file

Untuk dapat menggabungkan semua file javascript menjadi satu, kita harus mengetahui file javascript apa saja yang DAPAT TERDETEKSI sebelum content web kita ditampilkan.

Untuk keperluan tersebut, kita dapat menggunakan hook wp_enqueue_scripts, meskipun masih terdapat kelemahan (dijelaskan kemudian), setidaknya hanya ini yang bisa digunakan.

Untuk menggabungkan file javascript menjadi satu, langkah yang diperlukan:

  1. Urutkan file javascript sesuai dependencynya dengan menjalankan method all_deps pada object WP_Scripts ( $wp_scripts->all_deps($wp_scripts->queue) );
  2. Gabungkan file javascript yang telah diurutkan.
  3. Jangan lupa untuk menyertakan script yang ada pada wp_localize_script (jika ada), script ini berada di key data pada $wp_scripts->registered['handle']->extra, script ini dapat dilihat dengan mencetak objek WP_Scripts ( print_r($wp_scripts) )
  4. Load file javascript hasil penggabungan.
  5. Deregister script/handle, hal dilakukan HANYA setelah penggabungan selesai, karena jika suatu script di deregister, maka script dependent nya juga akan ter-deregister

Selanjutnya copy paste code berikut pada file functions.php:

add_action( 'wp_enqueue_scripts', 'merge_all_scripts', 9999 );
function merge_all_scripts() 
{
	global $wp_scripts;
	
	/*
		#1. Urutkan file javascript sesuai dependencynya, 
			hasilnya: akan disimpan pada property to_do ($wp_scripts->to_do)
	*/
	$wp_scripts->all_deps($wp_scripts->queue);	
	
	// Lokasi file baru: E:xampphtdocswordpresswp-contentthemejagowebdevmerged_script.js
	$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'merged_script.css';
	
	$merged_script	= '';
	
	// Loop javascript files and save to $merged_script variable
	foreach( $wp_scripts->to_do as $handle) 
	{
		/*
			Bersihkan url, misal wp-content/themes/jagowebdev/main.js?v=1.2.4
			menjadi wp-content/themes/jagowebdev/main.js
		*/
		$src = strtok($wp_scripts->registered[$handle]->src, '?');
		
		/**
			#2. Gabungkan file javascript.
		*/
		// If src is url		
		if (strpos($src, 'http') !== false)
		{
			// Dapatkan site url web kita, misal: http://jagowebdev.com/wordpress
			$site_url = site_url();
		
			/*
				Jika dari server lokal, maka ubah url menjadi relative path,
				Misal: http://jagowebdev/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
				Menjadi: /wp-content/plugins/wpnewsman/css/menuicon.css,
				hal ini untuk mengurangi HTTP Request
				
				Jika tidak, misal: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
				maka biarkan apa adanya
			*/
			if (strpos($src, $site_url) !== false)
				$js_file_path = str_replace($site_url, '', $src);
			else
				$js_file_path = $src;
			
			/*
				Untuk dapat menggunakan fungsi file_get_contents hilangkan slash,
				Misal /wp-content/plugins/wpnewsman/css/menuicon.css
				Menjadi wp-content/plugins/wpnewsman/css/menuicon.css
			*/
			$js_file_path = ltrim($js_file_path, '/');
		}
		else 
		{			
			$js_file_path = ltrim($src, '/');
		}
		
		// Check wether file exists then merge
		if  (file_exists($js_file_path)) 
		{
			// #3. Check for wp_localize_script
			$localize = '';
			if (@key_exists('data', $wp_scripts->registered[$handle]->extra)) {
				$localize = $obj->extra['data'] . ';';
			}
			$merged_script .=  $localize . file_get_contents($js_file_path) . ';';
		}
	}
	
	// write the merged styles into current theme directory
	file_put_contents ( $merged_file_location , $merged_script);
	
	// #4. Load the URL of merged file
	wp_enqueue_script('merged-script',  get_stylesheet_directory_uri() . '/merged_script.js');
	
	// 5. Deregister handles
	foreach( $wp_scripts->to_do as $handle ) 
	{
		wp_deregister_script($handle);
	}
}

3 Pastikan proses penggabungan telah berhasil

Selanjutnya cek apakah proses penggabungan telah berhasil, caranya, buka halaman web, kemudian klik kanan dan pilih view source.

Jika berhasil maka akan tampak seperti gambar berikut:

Menggabungkan File Javascript Pada WordPress Menjadi Satu File - Hasil

Kemudian pastikan juga bahwa kode javascript hasil penggabungan tidak mengandung error, caranya, buka Developer Tools (Tekan F12 pada Google Chrome) dan pilih tab console.

Jika tidak terdapat error, maka tampilan console akan seperti gambar dibawah ini.

Cek Error Pada File Javascript Menggunakan Developer Tools

Pesan error bisa bermacam-macam, dan pastikan bahwa error tersebut memang disebabkan karena kode javascript yang error.

Contoh error yang bukan karena kode javascript: Failed to load resource: net::ERR_INTERNET_DISCONNECTED atau Failed to load resource: the server responded with a status of 404 (Not Found)

4 Cek sisa script yang belum terdeteksi

Jika diperhatikan pada source halaman web, ternyata ada satu file yang belum ikut digabung yaitu wp-embed.min.js

Lebih jauh lagi, jika pada halaman tersebut ada form komentar dan kita menggunakan plugin Akismet, bisa dipastikan ada script satu lagi yang belum tergabung, yaitu akismet.js

Kenapa bisa seperti ini? Hal ini terjadi karena script tersebut diload pada bagian footer dengan urutan paling belakang, sehingga tidak terjangkau oleh hook wp_enqueue_script.

Bagaimana mengatasi nya? mau tidak mau kita harus menggunakan cara manual

Cara ini dilakukan dengan terlebih dahulu menjalankan hook wp_footer(), kemudian bandingkan script mana saja yang belum terdeteksi oleh wp_enqueue_script.

Selanjutnya kita simpan informasi script tersebut pada database untuk kemudian kita gabungkan dengan file hasil penggabungan menggunakan hook wp_enqueue_script

cara ini cukup panjang dan kompleks, sobat dapat mempelajarinya pada plugin APH Merge Script yang saya kembangkan

Kenapa…?

Kenapa tidak menggunakan hook wp_footer saja untuk menggabung file javascript? toh dengan hook tersebut bisa tahu semua file javascript yang di load.

Yup betul pada hook tersebut semua file dapat terdeteksi, namun, kita tidak dapat menggunakannya karena:

  1. Kita harus menderegister script tersebut diawal add_action( 'wp_footer', 'deregister_scripts' ) sedangkan untuk dapat mengetahui semua file yang diload, kita harus mengakhirkan penggunaan hook add_action( 'wp_footer', 'merge_all_scripts', 999 )
  2. Perhatikan angka 999, angka tersebut artinya fungsi merge_all_scripts akan di load belakangan. Padahal ketika dideregister, file tersebut akan hilang, tidak akan terdeteksi lagi.
  3. Jika menggunakan wp_footer(), kita tidak dapat menempatkan file javascript hasil penggabungan di header, karena sudah terlambat, header sudah selesai dieksekusi.

Penutup

Menggabungkan file javascript pada wordpress menjadi satu file dapat dilakukan dengan mudah.

Namun pada situasi tertentu, seperti contoh diatas, ada beberapa file yang tidak dapat langsung terdeteksi seperti: wp-embed.js dan akismet.js.

Hal ini biasanya terjadi pada file javascript yang di load belakangan pada wp_footer.

Hal tersebut hanya dapat diatasi dengan cara manual atau semi manual, sobat dapat mempelajarinya pada plugin APH Merge Scripts yang saya kembangkan.

Demikian pembahasan mengenai cara menggabungkan file javascript pada wordpress menjadi satu file, semoga bermanfaat.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP
  2. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP
  3. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL
  4. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP
  5. Menghitung Selisih Waktu Dengan PHP – Cara Termudah
  6. Memahami Fungsi Date Pada PHP
  7. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu
  8. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP
  9. Setting ODBC MySQL Untuk Gammu
  10. Cara Install dan Menggunakan Gammu di Windows