使用 vite 开发 vue3 时， 使用 import.meta.env.SSR 判断 ssr 逻辑代码，代码没有进行摇树优化，这是为啥？

[J-env]

<script setup lang="ts">
const isSsr = import.meta.env.SSR;

const test = isSsr ? 'ssr' : 'client';
</script>

<template>
<div>{{ test }}</div>
</template>

打包后 代码依然存在

[so1ve]

const test = import.meta.env.SSR ? 'ssr' : 'client';

[J-env]

This doesn't work:

<script setup lang="ts">
const isSsr = import.meta.env.SSR;

const test = isSsr ? 'ssr' : 'client';
</script>

<template>
<div>{{ test }}</div>

<div v-if="isSsr">
ssr code...
</div>
<div v-else>
client code...
</div>
</template>

In this case, an error will be reported:

<script setup lang="ts">
</script>

<template>
<div v-if="import.meta.env.SSR">
ssr code...
</div>
<div v-else>
client code...
</div>
</template>

[linzhe141]

jsx可以

---

[Shyam-Chen]

<ClientOnly>
  ...
</ClientOnly>

https://github.com/antfu/vite-ssg/blob/7ef969c0e8e96e0dd4915f8c9aacb006a94e7a9d/src/client/components/ClientOnly.ts

[J-env]

这个只是判断 客户端 渲染吧，没有在打包的时候进行摇树优化
https://cn.vitejs.dev/guide/ssr.html#conditional-logic

[Shyam-Chen]

<script lang="ts" setup>
import { h } from 'vue';

function Render() {
  return import.meta.env.SSR ? h('div', '___SSR___') : h('div', '___CSR___');
}
</script>

<template>
  <Render />
</template>

[linzhe141]

没有问题吧

[so1ve]

因为他把import.meta.env.SSR赋值给了变量