Angular vs. React vs. Vue (Part VI: Payload Size)

I took the three “To Do” apps built with Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16), applied some form validation, and generated a production build for each app. In this article, I’m comparing the build size and the payload size of each app.

Framework Files Generated Number of Requests Payload Size (KB)
Angular 7 files (290 KB) 5 284
React 9 files (1.98 MB) 4 406
Vue 8 files (962 KB) 4 180
Table 1. Build artifacts and payload summary

Files Generated are the files produced by the build process and the ones to be deployed to the production server. React and Vue have a lot larger total file size because the build process of the two frameworks produce a .map file for every minified JavaScript file and/or CSS file.

Once the app is deployed to a production server, accessing the app on its URL triggers requests to several static resources (JavaScript, CSS file, etc); these requests are Number of Requests on Table 1 above, excluding requests to remote API.

The Payload Size is the total size of all those static resources. JavaScript files (the framework and application code) makes up the most of payload. The React app has the most payload, and Vue app the least.

Table 2. Build artifacts
Framework Filename Size (KB)
Angular 3rdpartylicenses.txt 2.12
favicon.ico 5.30
index.html 0.61
main.3584cb656b4d762e14c3.js 222.00
polyfills.2f4a59095805af02bd79.js 58.10
runtime.a66f828dca56eeb90e02.js 1.02
styles.34c57ab7888ec1573f9c.css 0.02
React asset-manifest.json 0.20
favicon.ico 3.77
index.html 0.64
main.65027555.css 0.09 0.28
main.8a73369a.js 400.00 1580.00
manifest.json 0.32
service-worker.js 3.18
Vue app.c9980c65.css 0.02
app.c4cbf4c9.js 4.15 19.30
chunk-vendors.d8813c49.js 173.00 762.00
favicon.ico 1.12
index.html 0.87

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.