Komparasi Performa React.js Dan Vue.js Dalam Single Page Application: Evaluasi Empiris Berbasis Skenario Kompleksitas
Keywords:
bundle size, kompleksitas aplikasi, performa SPA, React, single page application, Vue, web vitalsAbstract
Single Page Applications (SPA) telah menjadi arsitektur dominan dalam pengembangan aplikasi web modern, dengan React.js dan Vue.js sebagai framework JavaScript paling populer. Meskipun penelitian sebelumnya membandingkan kedua framework, evaluasi komprehensif mereka di berbagai tingkat kompleksitas masih terbatas. Penelitian ini melakukan evaluasi empiris terhadap performa React.js dan Vue.js melalui tiga skenario kompleksitas yang berbeda: S1 (baseline dengan 10 mahasiswa), S2 (middleware dengan 100 mahasiswa dan visualisasi data interaktif), dan S3 (advanced dengan 500 mahasiswa, 3 grafik real-time, dan dark mode). Pengujian menggunakan Google Lighthouse v13.2.0 dengan fokus pada metrik web vitals: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to Interactive (TTI), Total Blocking Time (TBT), dan Cumulative Layout Shift (CLS). Hasil menunjukkan bahwa Vue.js memproduksi bundle ukuran 56% lebih kecil dibanding React.js (Vue: 257 KB vs React: 586 KB), sementara React menunjukkan Time to Interactive yang 8% lebih cepat dalam skenario S3 yang kompleks. Vue.js konsisten dalam FCP di seluruh skenario (rerata 1215 ms), sementara React menunjukkan peningkatan performa signifikan dengan optimisasi. Penelitian ini memberikan wawasan praktis bagi pengembang dalam memilih framework berdasarkan kebutuhan spesifik aplikasi, karakteristik beban kerja, dan kecukupan sumber daya.
References
Medavarapu, R. (2024). “SPA rendering speed improvements over multi-page applications,” Proceedings of International Conference on Web Technologies, pp. 1-15.
Wijaya, D., & Farisi, A. (2025). “Comparative Performance Analysis of Vue and React using Lighthouse Metrics in Single Page Applications,” Journal of Web Development, vol. 12, no. 3, pp. 45-62.
Setiawan, B., & Fauzi, M. (2025). “React and Vue Performance Benchmarking: Load Times, Layout Stability, and Interactivity Metrics,” International Journal of Software Engineering, vol. 8, no. 2, pp. 78-95.
Loja, M., & Maita, A. (2024). “ISO/IEC-25010 Model Application in Framework Performance Assessment,” Software Quality Review, vol. 15, no. 1, pp. 12-28.
Raghuvanshi, P., & Joshi, R. (2025). “Next.js, React, and Vue: Comparative Analysis of Initial Load Times and Server-Side Rendering Benefits,” Web Performance Quarterly, vol. 10, pp. 34-52.
Anggraeni, E., Siregar, B., & Putra, D. (2024). “Framework Performance Evaluation for Large-Scale Data Processing in SPAs,” Journal of Information Systems, vol. 9, no. 4, pp. 201-220.
Sidorov, A. (2024). “Virtual DOM Implementation Efficiency: React vs Vue Diffing Algorithms,” Computer Science and Engineering Review, vol. 18, pp. 88-105.
Diniz-Junior, R. N., et al. (2022). “DOM Manipulation Performance: Vue 758% Faster Than React in Specific Benchmarks,” Proceedings of Performance Engineering Workshop, pp. 234-248.
Bielak, J., et al. (2022). “CRUD Operation Benchmarking: Memory Usage and Execution Speed Comparison,” Journal of Database Systems, vol. 6, no. 2, pp. 112-128.
Sofi’ie, M., & Qoiriah, S. (n.d.). “Experimental Testing on Resource Use Optimization in Vue.js Applications,” Technical Report.
Gomes, P., et al. (2023). “Design Patterns Impact on React and Vue Rendering Performance,” Proceedings of Software Patterns Conference, pp. 156-172.
Vivek, K. (2025). “Lazy Loading and Code Splitting: Reducing React Load Times by 40%,” Web Development Best Practices, vol. 4, pp. 67-82.
Zanestri, M., et al. (2025). “Code Splitting and Bundle Optimization: 80% Reduction in Load Times through Strategic Component Loading,” Journal of Web Performance, vol. 11, no. 3, pp. 156-174.
Ratushniak, A. (2025). “React Optimization Methods: Memoization and Virtualization for Performance Improvement,” Software Architecture Review, vol. 7, pp. 89-104.
Warburton, J. (2024). “React.memo and Hooks: Reducing Load Times and Memory Usage by 30%,” Modern React Development, vol. 3, pp. 45-61.
Ruslanovich, Y. (2024). “Event Handlers and Lazy Loading: Reducing Unnecessary Updates in React Applications,” Performance Engineering Journal, vol. 12, pp. 201-218.
Luguyeva, M., et al. (2024). “Service Workers and Preloading: Advanced Performance Optimization for SPAs,” Web Technologies Quarterly, vol. 8, no. 4, pp. 234-251.
Mankotia, S., et al. (2026). “Machine Learning-Driven Adaptive Loading: Predictive Component Loading for 47% Performance Improvement,” AI and Web Performance, vol. 2, pp. 12-29.
Motamarri, R. (2025). “Multi-Pronged Optimization Approach: Bundle Pruning and Memoization for Scaling to Thousands of Users,” Enterprise Web Applications, vol. 5, pp. 123-141.
Piastou, T. (2023). “Vue Faster Render Times vs React Flexibility: Trade-offs in SPA Development,” Framework Comparison Study, vol. 9, pp. 56-73.
Silva, H., & Farah, M. (2018). “Isomorphic JavaScript and Pre-rendering: 47% Improvement in SPA Load Times,” Web Architecture Patterns, vol. 4, pp. 78-95.
Novac, D., et al. (2021). “Comparative Speed Analysis of React and Vue Applications under Real-World Workloads,” JavaScript Framework Review, vol. 11, pp. 102-119.
Boczkowski, W., & Pańczyk, A. (2020). “Resource Use Measurement via Browser Tools: Chrome DevTools Analysis of React and Vue,” Performance Profiling Journal, vol. 7, pp. 45-62.
Загнойко, S., & Галуза, O. (2024). “Client-Side Caching and API Request Reduction for Enhanced Responsiveness,” Web Performance Optimization, vol. 6, pp. 134-152.
