Progressive Web Application Framework Weigh-In
For those looking at building Progressive Web Applications (PWA), the primary goal is to have it load extremely fast and act like a native mobile app.
This is where frameworks enter the picture.
Yet, there is a cost for using these frameworks.
It's their size.
First, let's look at a simple PWA like the Weather PWA from Google I projectized in the post Building Progressive Web Apps (PWA) with Visual Studio.
The app.min.js comes in at 4,947b (5k).
What I intend to do to gauge each framework's size is the following:
- Do a dotnet new <framework>.
- Perform a dotnet restore.
- Perform an npm update.
- Do a dotnet build.
- Run the app using dotnet run.
- Look at the application using http://localhost:5000.
- View the size of the vendor.js file.
First Contender: Angular
Let's get started with our first framework: Angular.
I'm sorry...am I reading that right?
Ok, that's one hefty framework to deploy to a PWA.
Next Up: Knockout
Knockout should be relatively small.
Hmm...Knockout comes in at 1.4MB. That's a little better.
This is another reason why I'm going with Aurelia as opposed to Angular or React. Aurelia has got to be one of the smallest, most functional frameworks I've worked with.
A lean 953K! Woof! I like.
Finally: React and React w/ Redux
First, let's look over React and how it's size compares with the rest.
React weighs in at a 1.8MB.
React with Redux is a little bigger as expected with a 2.0MB footprint.
As you can see, there are definitely some differences between the frameworks. Here are the results from each test.
|Framework||Load Size||Framework Load Time|
A couple of notes regarding these tests:
- Each subsequent time the page was refreshed, every framework was memory cached and had a load-time of zero seconds. You can't get any better than that and that's the way it should be. Once the framework is downloaded, it should use it for any request.
- The Framework Load Time was calculated using Chrome Dev Tools. After I ran each framework in it's separate directory, I would click-and-hold the refresh button and choose 'Empty Cache and Hard Reload'. This would give me the initial load time in seconds for the vendor.js file in the Dev Tools Network tab.
I hope this has opened some developer's eyes as to the size of each framework when deployed. The die-hard JS developers can add and remove what they need to shrink it to distribute an even smaller package for a Progressive Web Application.
Have you built a new PWA yet? Are you using a large framework? Let's discuss in the comments below.