Vue3 lib bundle size is unexpectedly large

[AlexanderSlesarenko]

Hello everyone,
I found a statement about Vue 3 bundle size:

In my project you can see the following size:

How I use Vue?
import { createApp } from 'vue'
and something like import { ref, computed, watch } from 'vue'.

Do I have correct size or maybe I do some mistakes?

[Shyam-Chen]

vite build:

[AlexanderSlesarenko]

I use webpack

[backrunner]

Same here, that's very confusing, it seems like the tree-shaking didn't work correctly, but actually the tree-shaking behaved correctly.

[Jinjiang]

Not sure where this data comes from. Maybe it has been outdated. I suggest checking the size report on a recent PR like #9301 (comment)

[Anubarak]

I have the same issue, we only use ref and computed and have a bundle size of 37kb

Why is my bundle 3 times as large?
Is there any config required to drop something in vite?

[LinusBorg]

1. That number was an estimation during the development for Vue3, that article that was screenshotted is outated by a few years.
2. That estimate was explicitly made for a supersimple Hello World where everything we don't need is tree-shaken
3. Vue 3 didn't exactly reach that after launch, and has grown a bit since, as all software does that adds features and fixes bugs inevitably does.
4. The OP uses Vuetify, so it's pretty guaranteed that the app itself uses every feature of Vue 3 (because Vuetify uses every feature internally) and so nothing can be treeshaken from the Vue core.

[Anubarak]

From official FAQ https://vuejs.org/about/faq.html

A hello world Vue app that only uses the absolutely minimal APIs has a baseline size of only around 16kb, with minification and brotli compression. The actual size of the application will depend on how many optional features you use from the framework. In the unlikely case where an app uses every single feature that Vue provides, the total runtime size is around 27kb.

I made such an example, only one component, no ref, no computed, I only import createApp and have a vue bundle size of 32kb (broti). (that's only vue the actual size a little bit larger).
So obviously I miss something - can you please explain how it is possible to only get a 16kb large vue part.
So either my vite bundle analyser displays wrong numbers or I miss a config value

[LinusBorg]

Well I'm not sure what you did, here's what I did to get to the bottom of it for you:

---

TLDR: 16kb is pretty much spot on.

---

I created an absolutely minimal project (created with create-vue, looking like this:

// main.js
import { createApp, h } from 'vue'
createApp({ render: () => h('h1', 'Hello World') }).mount('#app')

and this stock config:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
})

has this result:

Not exactly 16 kb, but close.

One trick left: treeshake Options API with a build env variable:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  define: {
	'__VUE_OPTIONS_API__': false,
  },
})

Result:

and here's vite-bundle-analyzer:

17.38 kb (brotli)

...and that includes the 2 lines of app code and a few more lines of bootstrap code from vite. So 16 kb seems pretty much spot on - for the absolutely minimal "hello world".

However something is a bit off. The analyzer seems to show that only runtime-core is being included. surely as soon as we add ref or something from @vue/reactivity, size would probably increase and show something like your analyzer showed, righ?

So I added a ref:

import { createApp, h, ref } from 'vue'

const headline = ref('Hello World')
createApp({ render: () => h('h1', headline.value) }).mount('#app')

Yet build size doesn't really change!

Yet for some reason, now bundle analyzer includes the reactivity package as well as a bit from runtime-dom and shared - but analyzer now thinks the whole thing should be 26kb brotli compressed:

So what's going on?

1. Even my first minimal example already includes the reactivity package, at least ref and the non-treeshakable effects implementation etc. reason being that rendering itself uses a reactive effect.
2. So that's why the second example doesn't really add build size.
3. Yet somehow, bundle analyzer gets confused - likely because it does not analyze the actual bundled code, but tries to re-calculate something close to it from the individual package's source files.

Just out of curiosity, I also installed brotli on my macbook and acutally compressed the bundled index.js. Lo and behold:

Takeaways:

1. 16kb is pretty much spot on
2. Bundle analyzer results are always to be taken with a grain of salt, as they use approximations and can be off. They certainly give a good overview about how big of an impact different dependencies have on the overall bundle size and composition.

[qxygene]

dist/assets/@vue.js 63.89 kB

[a0s]

@AlexanderSlesarenko How to get that green diagram ?? Some tool or?

[AlexanderSlesarenko]

webpack-bundle-analyzer