时间戳

首页 > 解决方案 > 如何将 webpack 摇树功能应用到 Vue 模板的 v-if 指令？

vue.js - 如何将 webpack 摇树功能应用到 Vue 模板的 v-if 指令？

问题描述

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>

在上面的情况下，如果 tree shaking 功能有效，当 VUE_APP_CLIENT 设置为 A 时，module-b 的代码不应该包含在构建包中。但是它失败了。

摇树在模板语法中不起作用吗？

希望您的帮助，谢谢。

标签： vue.jstree-shaking

解决方案

据我所知，摇树在脚本级别而不是在 vue 模板上工作。也许您应该尝试将客户端组件/模块传递给模板？

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

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

如果我错了，您还需要修复计算属性，因为您使用“=”而不是“==”。

推荐阅读