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 |
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.
| 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 | |
| main.65027555.css.map | 0.28 | |
| main.8a73369a.js | 400.00 | |
| main.8a73369a.js.map | 1580.00 | |
| manifest.json | 0.32 | |
| service-worker.js | 3.18 | |
| Vue | app.c9980c65.css | 0.02 |
| app.c4cbf4c9.js | 4.15 | |
| app.c4cbf4c9.js.map | 19.30 | |
| chunk-vendors.d8813c49.js | 173.00 | |
| chunk-vendors.d8813c49.js.map | 762.00 | |
| favicon.ico | 1.12 | |
| index.html | 0.87 |