Everybody hates slow websites. One of the many things that can cause it is the site's assets are too big to load, hence the overall slow loading.
Long load time? Seamless route change ftw!
Above is a Chrome developer tools screenshot of a site built with
But, I am not going to cover that. That can be solved by using the same approach as server side applications do, by sending only the associated components for that route. This can be achieved using webpack magic too.
There are other initial-load-related problems that affect react applications too.
Big assets can be a thing, but there are also other thing that can impact load time.
react-dom themselves to those niche packages you downloaded like
wowjs (because, really, everybody likes those plug and play stuffs).
Imagine one day you made a react application, shipped it, the users already visited and downloaded your site's assets, then you need to make a hotfix for that buggy component of yours. One line fix, hell, even one character fix can force the browser to download the asset all over from the beginning. All that 789 kilo bytes containing just a very slight different must be downloaded all over again.
See, the browser doesn't care whether you changed the entire code base or just one character, as long as it's different, it will discard the cache and re-download the file. It will be so much waste. That's why you need to separate your vendor libraries from your application code. Because then, you don't have to force the users to download already-in-cache-and-there-is-no-new-change code, such as
react. The browser only need to download the updated code.
without separating the vendor
vendor separated using webpack
But then it raises some problems like how to seamlessly integrate the work flow, how to make sure that objects libraries from the vendor file can be used within the application code file, etc.
With webpack magic, surely we can! I will post the webpack configuration and logic behind it later.