React vendor chunk size quite large

Question

I recently started working on a JSS React template. Today I ran jss build and found that the vendor chunk size is 436KB non-gzipped. Being that JSS is built on top of CRA whose vendor files total 118KB, I'm a bit worried about the ~320KB difference.

I also checked Chrome's coverage devtool and found that 43% of the vendor code is not actually used, although I assume it would be less in connected mode (I have no way to test that yet).

Now, I am aware that JSS is currently in Tech Preview, so I'm curious if this point will be addressed in the final release or if it's even seen as a concern by the dev team. At the moment, loading half a MB for just libs is a huge performance hit for our users and I'm reluctant about using JSS in production.

Am I missing something? Is there anything else I can do aside from ejecting and/or caching the files?

Thank you!

Please note that this is a different question than Angular Bundle size issue which concerns the unknown modules, and not the chunk size.

Answer 1

You are correct that the vendors chunk for the JSS React sample app is ~430KB before gzip (after gzip that number is ~116KB). The disparity with the "vanilla" CRA bundle size is a result of the additional dependencies that are used by the JSS sample app, e.g. Apollo for GraphQL, i18next for translation, etc...

The important thing to understand is that you are not required to use a JSS sample app as the basis for a production app. The sample apps are intended to be just that, samples. As such, they have to strike a balance between getting started with JSS and demonstrating the features of JSS - all of which requires pulling in dependencies you may not ultimately need in your app.

To that end, in a React app - regardless of whether or not it is based on CRA - the only dependency you need in order to use the JSS helper components in your app is @sitecore-jss/sitecore-jss-react. Any other dependency in the sample apps is to support the various JSS development modes and the various Sitecore/JSS features demonstrated in the sample apps.