As we discussed in the last chapter, the biggest problem with converting React applications to Progressive Web Apps is React; more specifically, it's the amount of JavaScript that intrinsically comes along with building a modern JavaScript application. Parsing and running that JavaScript is the biggest single bottleneck for Chatastrophe’s performance.
In the last chapter, we took some measures to improve the perceived startup time of our application, by moving content out of our JavaScript and into our index.html
. While this is a very effective method of displaying content to the user as quickly as possible, you'll note that we didn't do anything to actually change the size of our JavaScript, or reduce the time it takes to initialize all that React goodness.
Well, now's the time to do something about it. In this chapter, we'll look at how we can split up our JavaScript bundle for faster loading. We'll also introduce a new...