sauladam

Agreed that it would probably be a sensible default. But leaving it off seems to be the safest option in terms of reducing friction and confusion since it works either way.

I wonder if there is an easy way to determine at compile time whether the template compiler is needed in the prod build or not. This would be a really powerful feature.

Anyway, thanks again and have an even nicer day! :) (Friday 13th in 2020, what could possibly go wrong, right?)

Duuuude.... How did I miss that?!

This option does not seem to be mentioned anywhere in the docs though, but maybe I'm just too dumb to use google.

Regardless - thank you so much, this did the trick!

I'm using a Mix 6.0.0-beta.14 with Vue 3 (no Laravel involved here). I've got a very basic app.js file:

// app.js

import { createApp } from "vue"

createApp({
  render: (h) => {
    return h('div', {})
  }
}).mount('#app')

which I run through mix: mix.js('app.js', 'dist/') with npm run prod

This gives me a bundle size of 47.7 KiB (19 KiB gzipped). Fair enough.

Now I want to use this awesome single file component :

<!-- AwesomeComponent.vue -->

<template>
  <div>Hello there</div>
</template>

<script>
  export default {}
</script>

So i pull it in in my app.js:

// app.js

import { createApp } from "vue"
import AwesomeComponent from './AwesomeComponent.vue'

// ...

Since now there is some vue specific stuff involved, I need to tell mix to handle that:

mix.js('app.js', 'dist/').vue()

When I now npm run prod, I get a bundle size of 348 KiB (102 KiB gzipped)!

That's quite a lot. My understanding is that mix handles all the single file components and transpiles templates into render functions, no? So in production we would only need the Vue runtime, which is supposed to be around 33 KiB gzipped. But it looks like a full blown Vue bundle is pulled in.

What am I missing? How do I reduce the bundle size?