Vue-storefront: JS Bundles are too large for mobile

[slightlyoff]

Howdy!

This project was brought to my attention by @tomayac, @devnook, and @rowan-m.

Running the live demo through Web Page Test unearthed some surprises.

One of the most concerning issues is the size of the JS bundles. The Content Breakdown view shows ~750KB of JS being served, which unzips to more than 2MB of code:

By comparison, the Polymer Shop demo -- an app of similar complexity which takes advantage of route-based code-splitting and granular loading -- taken on the same HW and network configuration confuses chrome devtools slightly, but by inspection only needs ~200K of script to load a fully-functioning experience.

The Vue demo is more than 3x larger and is unlikely to perform well on a low-end mobile device as a result.

[pkarw]

Thanks for Your observation; this is one of the reasons we started working on https://github.com/DivanteLtd/vue-storefront/pull/1210

It’s still Work In Progress but You can test it if You like / have some free time. @DavidRouyer is working on this one and it probably solve this issue

Any support is appreciated, we’re open source, and the biggest challenge is always to find as much time for the developement and optimization’s as we would like to have :-)

[pkarw]

We made a first step with removing two huuuge packages (#1293, #1294) / it gave us -40% in size

[tomayac]

Brilliant progress! Tree shaking is good, but a common sense human audit is priceless!