Vue 3 Treeshaking not taking place

[craigrileyuk]

• Laravel Mix Version: github source
• Node Version (node -v): 14.4
• NPM Version (npm -v): 6.14.5
• OS: MacOS 10.15.7

Description:

Using the new .vue method for Vue 3, the output size of my main .js file is around 350KB. This seems to suggest that the tree-shaking for Vue3 is not taking place and the entire Vue library is being included.

Steps To Reproduce:

const mix = require('laravel-mix');
mix.js("resources/vue/main.js", "public/js").vue({version:3});

Use a basic Vue template and then run a production build.

[thecrypticace]

I'll take a look at this today or tomorrow.

[thecrypticace]

So the output size is rather large for the non-runtime builds because it's including babel parser which ends up being about 230 KB by itself. I'm guessing this is because its using babel to compile in-browser templates. The runtime-only build produces a much smaller bundle. It also looks like there's some tree-shaking taking place because when I use v-model, <KeepAlive>, and <Suspense> the vendor bundle goes from 43.3 KiB to 49.5 KiB.

I've opened a PR to enable use of the runtime build of vue: #2524

[artfulrobot]

This needs documentation. When I found that a basically empty app.js compiled to a 350KB production .js file I thought that it Laravel Mix had had its day, and I started looking at vite, vue-cli and other ways to get vue3 working.

I'm one of "the rest of us" as referenced in this project's About text, I'm not a webpack expert by any means, which is why I use mix. I'm also new to Vue 3. Mix has been a fantastic API that I've loved, but I need to be able to make small production builds. Of course I need to learn more, but if this project is to make the power of webpack easy, it needs to document this stuff.

Adding .vue({version:3, runtimeOnly: true}); reduces my no-op app to just 1.37KB (down from 349KB).

So as long as I don't need Vue to be interpreting templates in the browser, then that's definitely what I want. If I did need Vue to compile templates, it costs me 347KB - I wonder if there's another way? Or perhaps it's that Vue3 only creates ES6 render functions, so if we're expecting it to work pre-ES6 browsers then the whole of babel is required? I'm revealing my ignorance!

Anyway, some clearer documentation about these things in Vue3/mix6 projects would be great.

[thecrypticace]

Yeah it's absolutely not ideal. It surprised me too when I first discovered it. However, this is currently being tracked as a bug in the Vue 3 repo: vuejs/core#2515