Subscribe on changes!

withDefaults object variable results in non-tree-shakable component

avatar
Oct 30th 2023

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-3cmbr7?file=dist%2Fassets%2Findex-311591ca.js

Steps to reproduce

  1. npm run build
  2. open dist/assets/index-....js and scroll to the bottom
  3. see bundled NonTreeshakable

What is expected?

Component should be tree-shaken

What is actually happening?

Component isn't tree-shaken because it compiles to

/* @__PURE__ */ defineComponent({
  __name: "NonTreeshakable",
  props: mergeDefaults({
    prop1: { type: Boolean },
    prop2: {}
  }, propsDefaults),
  setup(__props) {
    ...
  }
});

mergeDefaults ends up being used at the top level and isn't marked as sideEffect-free.

System Info

No response

Any additional comments?

I ran into this after looking into why radix-vue seems way too large compared to how small my imported components are. Their PopperContent.vue leads to this exact problem.