ISFADHILLAH, Muhammad Ilham (2025) Analisis Pengaruh Code Splitting terhadap Waktu Muat Awal Halaman Web Menggunakan ReactJS dan VueJS. Skripsi thesis, Universitas Jenderal Soedirman.

	PDF (Cover) COVER-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Download (340kB)
	PDF (Legalitas) LEGALITAS-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Restricted to Repository staff only Download (1MB)
	PDF (Abstrak) ABSTRAK-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Download (177kB)
	PDF (BabI) BAB-I-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Restricted to Repository staff only until 15 August 2026. Download (175kB)
	PDF (BabII) BAB-II-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Restricted to Repository staff only until 15 August 2026. Download (1MB)
	PDF (BabIII) BAB-III-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Restricted to Repository staff only until 15 August 2026. Download (2MB)
	PDF (BabIV) BAB-IV-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Restricted to Repository staff only Download (6MB)
	PDF (BabV) BAB-V-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Download (159kB)
	PDF (DaftarPustaka) DAFTAR PUSTSAKA-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Download (162kB)
	PDF (Lampiran) LAMPIRAN-Muhammad Ilham Isfadhillah-H1A021066-Skripsi-2025.pdf Restricted to Repository staff only Download (2MB)

Abstract

Waktu muat awal halaman adalah elemen krusial dalam pengembangan aplikasi web, khususnya di bagian front end, penurunan kecepatan sekecil 100 ms secara signifikan dapat menurunkan kemampuan web dalam mempertahankan pengguna dan mencapai targetnya (tingkat retensi dan konversi). Di sisi lain, penggunaan kerangka kerja modern seperti ReactJS dan VueJS dapat menghasilkan ukuran bundle JavaScript yang relatif besar dan berdampak negatif pada waktu muat awal. Teknik code splitting hadir sebagai solusi untuk memecah bundle menjadi bagian-bagian yang lebih kecil dan dimuat sesuai kebutuhan. Penelitian ini menganalisis dampak dua teknik code splitting, yaitu dynamic import (dengan strategi route-based code splitting dan component-based code splitting) dan chunk split (dengan strategi ukuran maksimal chunk) terhadap waktu muat awal halaman pada aplikasi FindSoed. Pengujian dilakukan pada aplikasi tersebut yang dibangun dengan kombinasi kerangka kerja ReactJS dan VueJS dalam mode Client Side Rendering (CSR) dan Server Side Rendering (SSR) menggunakan bundler Rsbuild dan Vite. Kinerja diukur menggunakan perangkat lunak Lighthouse berdasarkan metrik First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Speed Index (SI). Untuk membandingkan efektivitas strategi secara keseluruhan, diterapkan sebuah sistem skoring yang menghitung jumlah total keunggulan pada setiap metrik di seluruh kombinasi pengujian. Hasil penelitian menunjukkan bahwa strategi route-based code splitting pada teknik dynamic import secara konsisten menjadi yang paling unggul, mengurangi ukuran JavaScript awal secara dratis (selisih hingga 400 kB) dan meningkatkan semua metrik kinerja. Sebaliknya, variasi pada strategi chunk split tidak menunjukkan pola keunggulan yang konsisten dan perbedaan ukuran JavaScript awal yang sangat kecil (selisih di bawah 1 kB), sehingga membuat hasil pengujian dapat dipengaruhi oleh faktor lain seperti latensi jaringan.

Actions (login required)

View Item