|
|
|
|
|
by brianmathews
2578 days ago
|
|
From recent bundle audits of e-commerce sites built with React, less than 20% of the code was actual custom site code and the remaining 80% was from dependencies. If the bundle size is 550kb min/gzipped, that's 110kb of app code, and 440kb of dependencies. Some of the largest dependencies in a recent audit were: moment (60kb), swiper (32kb), lodash (24kb), react-select (26kb), raven.js (12kb),
polyfills (25kb), mobile-detect (15kb), and then a bunch of smaller dependencies that made up the remaining 300kb. Using this performance budget calculator you can quickly see how each 25kb of JS adds ~.3s to your TTI on a mobile phone: https://perf-budget-calculator.firebaseapp.com/ If developers shop around for smaller alternatives of each dependency, then they can cut their load times pretty drastically. |
|
For example, Relay removes the need for a lot of Flux and network request boilerplate. Going beyond that, it can collapse serial network fetches down into one request, massively speeding up page loads.
(This doesn't apply to moment, that library is just designed in a brain dead way).