Update Artikelilmiah: 49751

MUHAMMAD ILHAM ISFADHILLAH

NIM

Judul Artikel

Abstrak (Bhs. Indonesia)

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 CSR dan SSR menggunakan bundler Rsbuild dan Vite. Kinerja diukur menggunakan perangkat lunak Lighthouse berdasarkan metrik FCP, LCP, TBT, dan 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.

Abtrak (Bhs. Inggris)

Initial page load time is a crucial element in front-end web application development, where a speed decrease of as little as 100 ms can significantly lower the web's ability to retain users and achieve its targets (user retention and conversion rates). On the other hand, the use of modern frameworks such as ReactJS and VueJS produces relatively large JavaScript bundle sizes, which negatively impact initial load times. The code splitting technique emerges as a solution to break down the bundle into smaller parts that are loaded on demand. This research analyzes the impact of two code splitting techniques, dynamic import (with route-based and component-based strategies) and chunk split (with maximal chunk size strategies) on the initial page load time of the FindSoed application. The tests were conducted on that application built with a combination of the ReactJS and VueJS frameworks in both CSR and SSR modes, using Rsbuild and Vite bundlers. Web Performance was measured using Lighthouse software based on FCP, LCP, TBT, and SI metrics. To compare the overall effectiveness of the strategies, a scoring system was implemented that calculates the total number of wins for each metric across all test combinations. The research results show that the route-based code splitting strategy for dynamic import technique is consistently superior, reducing the initial JavaScript size drastically(with differences up to 400 kB) and improving all performance metrics. Conversely, variations in chunk split strategy did not show a consistent winning pattern and the very small differences in initial JavaScript size (with differences under 1 kB), which made the test results susceptible to other factors such as network latency.

Kata kunci

Pembimbing 1

Pembimbing 2

Pembimbing 3

Tahun

Jumlah Halaman