Jagowebdev

Home » Wordpress » 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_head, ~~wp_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:

Pada header ( tag <head> ), yang dapat diketahui dengan menggunakan hook: wp_head. Hook ini dijalankan sebelum tag <body> di load.
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:

Urutkan file javascript sesuai dependencynya dengan menjalankan method all_deps pada object WP_Scripts ( $wp_scripts->all_deps($wp_scripts->queue) );
Gabungkan file javascript yang telah diurutkan.
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) )
Load file javascript hasil penggabungan.
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: https://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:

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.

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:

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 )
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.
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.

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

11 Feedback dari pembaca

Dhimas Kirana says:

14 September 2017 at 17:38

Menjadikan 1 file apa nggak buat js nya error, kadang malah gak work seperti fungsi “load more” dengan menggunakan js?

- Agus Prawoto Hadi says:
  
  25 September 2017 at 08:31
  
  Kalau penggabungannya bener, dia ngga error mas, asal urut sesuai dependencynya dan tidak ada script yang ditulis hard coded
  
Souvenir karet says:

21 September 2018 at 03:13

Ijin nyimak. Mantap terus artikelnya mas. Salam sukses selalu..

- Agus Prawoto Hadi says:
  
  21 September 2018 at 19:24
  
  Terima kasih mas…
  
Kangmis says:

11 June 2019 at 07:24

Mantap bang.. Tak coba dulu…
Kalo dilakukan manual bisa gak ya mas..?? tanpa harus nambah js baru ke wp_head(). Maunya saya taroh di bawaan template gitu.
tadi dah nyoba deregister yang mau digabung.. trus JS tak gabungin di JS template bawaan masih blm working.. hahaha

- Agus Prawoto Hadi says:
  
  15 June 2019 at 06:37
  
  Iya mas, kadang memang tidak semua js dapat di tempatkan di foooter, karena masalah dependency
  
cargo murah says:

28 March 2020 at 12:29

thanks banget gan, bermanfaat sekali

- Agus Prawoto Hadi says:
  
  29 March 2020 at 05:48
  
  Terima kasih mas…
  
cargo semarang says:

14 August 2020 at 00:11

lebih praktis jadinya. ngaruh juga ke speed page ya mas?

- Agus Prawoto Hadi says:
  
  16 August 2020 at 06:06
  
  Betul mas, cuman perlu dipastikan tidak ada layout yang berubah
  
Farhad Sakhaei says:

5 June 2022 at 17:19

There is no $obj in the code !
But your code have the line :
$localize = $obj->extra[‘data’] . ‘;’;

Menggabungkan File Javascript Pada WordPress Menjadi Satu File

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

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

1 Mengetahui semua file javascript yang di load

2 Menggabungkan file javascipt pada wordpress menjadi satu file

3 Pastikan proses penggabungan telah berhasil

4 Cek sisa script yang belum terdeteksi

Kenapa…?

Penutup

Subscibe Now

11 Feedback dari pembaca

Silakan tinggalkan komentar Cancel reply

Social

Kategori

Contact us

About

More Info

Menggabungkan File Javascript Pada WordPress Menjadi Satu File

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

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

1 Mengetahui semua file javascript yang di load

2 Menggabungkan file javascipt pada wordpress menjadi satu file

3 Pastikan proses penggabungan telah berhasil

4 Cek sisa script yang belum terdeteksi

Kenapa…?

Penutup

Subscibe Now

Silakan tinggalkan komentar Cancel reply

Newsletter

Social

Kategori