Optimasi Performa Aplikasi Web Berbasis React Menggunakan Code Splitting dan Lazy Loading - Dalam bentuk buku karya ilmiah

TEGAR FADILLAH ZANESTRI

Informasi Umum

Kode

25.04.7154

Klasifikasi

006.76 - Multimedia systems- Programming, internet programming, web programming

Jenis

Karya Ilmiah - Skripsi (S1) - Reference

Subjek

Informatika

Dilihat

72 kali

Informasi Lainnya

Abstraksi

Penelitian ini bertujuan untuk meningkatkan performa aplikasi web berbasis React yang menggunakan pendekatan Client-Side Rendering (CSR) dengan menerapkan dua teknik optimasi: code splitting dan lazy loading. Masalah utama yang diangkat adalah rendahnya skor performa pada Google Lighthouse, yang terindikasi dengan lambatnya waktu muat awal serta besarnya ukuran bundle awal JavaScript, terutama pada halaman dengan elemen visual kompleks. Untuk mengatasi tantangan ini, penelitian ini menggunakan metodologi terstruktur yang mencakup analisis performa awal, identifikasi masalah performa, penerapan strategi code splitting dan lazy loading, dan pengujian pasca-optimasi. Pengembangan dilakukan menggunakan Visual Studio Code, dan evaluasi performa dilakukan dengan Google Lighthouse, Webpack Bundle Analyzer, serta Developer Web Tools. Aplikasi web yang digunakan dalam penelitian ini memiliki beberapa halaman inti seperti Login, Analisis Data, Data Akun, Data Pemasukan, dan Data Menu. Hasil penelitian menunjukkan peningkatan yang signifikan: lebih dari 80% pengurangan ukuran bundle awal, percepatan waktu muat hingga 80,66%, dan peningkatan skor performa antara 19% hingga 70,8% pada metrik lighthouse seperti First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), dan Speed Index. Temuan ini mengonfirmasi bahwa strategi code splitting dan lazy loading efektif dalam meningkatkan responsivitas dan efisiensi aplikasi web berbasis CSR. Penelitian ini memberikan wawasan praktis untuk optimasi performa antarmuka depan dan menawarkan solusi yang skalabel untuk pengembangan web modern.