Round 2: Progressive Web Application Framework Weigh-In
Personally, I can't believe it was a year-and-a-half ago. Seems like it was yesterday.
The contenders look the same as before, except for a new contender added to the mix: Vue.js.
It looks like it was added. Achievement Unlocked!
Conducting the Test
Just a quick note: these builds were created using .NET Core 2.1 so Visual Studio 2017 is required.
The tests will be the same as before with the following steps:
- Create a directory based on each framework and name each directory PWA-<framework> (like pwa-angular.)
- Do a dotnet new <framework>.
- Perform a dotnet restore.
- Perform an npm install (or 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.
Once these results are tallied, I'll compare these results to the previous post of results so we can see the size difference.
The New Guy: Vue.js
Let's see how the new guy fares in this test:
Not bad for a first time through.
The Veteran: Knockout.js
Knockout was a fast build as well and is down to 732K.
The Warhorse: Angular
For this build, there were some adjustments I had to make.
First, I updated NodeJs to version 8 (found that here).
Second, I followed steps 1-3, then proceeded to load the project into Visual Studio 2017.
I'm sorry to say, but Angular still doesn't disappoint. A whopping 9.1MB for Angular.
Yes...MB! NOT K, but I imagine it's everything but the kitchen sink.
The Underdog: Aurelia
Let's see how the latest version of Aurelia holds up.
979K. Almost a meg. Still not bad compared to Angular (actually, anything is better than Angular's size).
Mr. Popular: React
React came in with an interesting metric.
511K for the bundle. VERY impressive. This was the smallest out of all of them.
Mr. Popular (and his girlfriend): React with Redux
Finally, we have React with Redux.
I was expecting something a little bit bigger than 511K since we have an additional library included.
With everything factored into the bundle, it comes out to 540K.
With all of the contenders, we have our winner.
|February 2017||July 2018|
|Framework||Load Size||Framework Load Time||Load Size||Framework Load Time|
A couple things I noticed about these results:
- Almost all of the libraries went down in size...except Angular. Angular is getting BIG. It needs to go on a diet.
- From a speed perspective, all are in the millisecond range...except for Angular.
Of course, each library is geared towards a certain purpose with each one being a seasoned framework.
However, with Vue as the new up-and-coming library at 653K, it definitely has potential to compete with React.
Did Microsoft forget to include a JS library or framework you use the most? Did these results surprise you? Post your comments below and let's discuss.