How to apply webpack tree shaking feature to Vue template‘s v-if directive？

Question

Vue@2.6.14 Webpack@4.29.6

<template>
  <module-a v-if="isClientA"></module-a>
  <module-b v-else></module-b>
</template>
<script>
export default {
  computed: {
    isClientA() {
      return process.env.VUE_APP_CLIENT === 'A'
    }
  }
}
</script>

In above case, if tree shaking feature works, module-b's code should not be included in the build package when VUE_APP_CLIENT is set to A. But it failed.

Is tree shaking not works in template syntax ?

Hope your help, thanks.

score 0 · Answer 1 · answered Aug 11 '21 at 15:48

As far as I know tree shaking works on script level not on vue template. Maybe you should try to pass client component/module to template?

<template>
  <div :is="clientModule"></div>
</template>

created() {
  if(process.env.VUE_APP_CLIENT === 'A') {
    this.clientModule = moduleClientA
  }
  else {
    this.clientModule = moduleClientB
  }
}

If I'm wrong you need also fix computed property because you use '=' instead of '=='.

How to apply webpack tree shaking feature to Vue template‘s v-if directive？

1 Answers1