Gridsome/Vue.js: How do I reduce the core bundle size?

Question

I'm about to deploy a static Gridsome website. Currently the whole site weighs 518KB (with self-hosted, drastically subsetted fonts, minified inline SVGs, etc) before gzipping. I know that's already not the most gigantic site of all time, and yet.

Running Chrome's code coverage tools, and 88561 bytes of app.js (which totals 181166 bytes) are going unused. That's nearly 50% of the file. That's… that's a lot.

I have no dependencies other than Gridsome, and my own JavaScript code is quite light. So I'm given to assume that most of that weight is from Vue.js or Gridsome. Gridsome already uses Webpack 4 in the back, so I think it's doing a lot of stripping, but still, I'm vexed.

Is there anything I can do, or is this just unavoidable? Do I need to be writing the whole thing vanilla to bypass this bloat?

Thanks in advance :)

Answer 1

I just started a new Gridsome site, and the app.js file is ~181kB as well. Gridsome's docs say:

Gridsome adds a 57kB min gzip JS bundle size by default.(vue.js, vue-router, vue-meta and some for image lazy loading).

I ran gzip app.js on my built app.js file, and ended up with a 63kB file. Based on that, and the fact that the default build is 57kB by default, I think you're not going to end up with a much smaller app.js file without a whole lot of custom work to strip out unused things.

I think this is just part of the downside of using prebuilt libraries and frameworks, unfortunately. That's not to say there aren't ways to improve things, but out of the box it looks like this is what you get.