Optimasi Performa React JS Menggunakan Code Splitting

Fauzan Pradana, Dika Rizky Yunianto, Sofyan Noor Arief

Abstract


Optimasi kinerja dalam pemrograman web telah menjadi fokus utama karena permintaan akan waktu muat yang lebih cepat oleh pengguna. Code splitting, yang membagi kode JavaScript menjadi potongan-potongan kecil untuk dimuat sesuai kebutuhan, adalah salah satu pendekatan yang efektif. Dalam konteks React, fitur bawaan seperti React.Lazy dan React.Suspense memungkinkan code splitting hingga tingkat komponen. Penelitian sebelumnya telah menunjukkan bahwa penerapan code splitting dapat signifikan mengurangi waktu rendering di sisi klien dan mempercepat waktu pemuatan aplikasi web berbasis React JS. Tujuan penelitian ini adalah untuk mengetahui pengaruh code splitting terhadap performa React JS web application. Hasil penelitian ini adalah code splitting terbukti dapat meningkatkan performa aplikasi web berbasis React JS yang diukur menggunakan Lighthouse.

Keywords


React JS; Code splitting; Performa web

Full Text:

PDF

References


O. A. Abdurakhimovich, "Analyzing The Efficiency and Performance Optimization Techniques of React.Js in Modern Web Development," ZDIT, 2023.

A. Javeed, "Performance Optimization Techniques for ReactJS," IEEE International Conference on Electrical, Computer and Communication Technologies(ICECCT), 2019.

P. Rawat and A. N. Mahajan, "ReactJS: A Modern Web Development Framework," International Journal of Innovative Science and Research Technology, 2020.

F. Pavić and L. Brkić , "Methods of Improving and Optimizing React Web Applications," MIPRO, 2021.

React Development Team, "Code Splitting - React Documentation," [Online]. Terdapat: https://legacy.reactjs.org/docs/code-splitting.html. [Diakses pada 2023].

D. Tanudjaja and R. Tanone, "Analisis Penerapan Code Splitting Library React pada Aplikasi Penjualan Mebel Berbasis Website," Jurnal Teknik Informatika dan Sistem Informasi, 2021.

S. Lauria, "Improving the Initial Rendering Performance of React Applications Through Contemporary Rendering Approaches," Otaniemi: Aalto University School of Science, 2023.

React Development Team, "React Reference - Lazy," [Online]. Terdapat: https://react.dev/reference/react/lazy. [Diakses pada 2024].

React Development Team, "React Reference - Suspense," [Online]. Terdapat: https://react.dev/reference/react/Suspense. [Diakses pada 2024].

N. Wehner, M. Amir, M. Seufert, R. Schatz and T. Hoßfeld, "A Vital Improvement? Relating Google’s Core Web Vitals to Actual Web QoE," in Quality of Multimedia Experience, 2022.




DOI: https://doi.org/10.31284/p.snestik.2024.5878

Refbacks

  • There are currently no refbacks.


Copyright (c) 2024 Fauzan Pradana, Dika Rizky Yunianto, Sofyan Noor Arief

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.