vite对代码的优化

46 阅读1分钟

把这个文件用vite打包

<script setup>
// 有一个环境变量 VITE_VALUE值为'NONE'
const { VITE_VALUE } = import.meta.env
console.log(VITE_VALUE)
const viteVal = import.meta.env.VITE_VALUE
console.log(viteVal)
console.log(import.meta.env.VITE_SHOWPAYMENT)
console.log(viteVal !== 'NONE' && window.__somevalue)
const d = import.meta.env.VITE_VALUE !== 'NONE' && window.__somevalue
</script>
<template>
  <div>1
    <div v-if="d">2</div>
  </div>
</template>

结果如下

import {
  openBlock as o,
  createElementBlock as n,
  createTextVNode as c,
  unref as l,
  createCommentVNode as r,
} from 'vue'
const E = {
 // 其他环境变量
  VITE_VALUE: 'NONE',
}
const a = { key: 0 }
const V = {
  __name: 'a',
  setup (N) {
    // 原始语句 const { VITE_VALUE } = import.meta.env
    const { VITE_VALUE: _ } = E
    console.log(_)
    // 原始语句 const viteVal = import.meta.env.VITE_VALUE
    const e = 'NONE'
    // 原始语句 console.log(viteVal)
    console.log(e)
    // 原始语句 console.log(import.meta.env.VITE_SHOWPAYMENT)
    console.log('NONE')
    // 原始语句 console.log(viteVal !== 'NONE' && window.__somevalue)
    console.log(e !== 'NONE')
    // 原始语句 const d = import.meta.env.VITE_VALUE !== 'NONE' && window.__somevalue
    const s = !1
    return (u, t) => (
      o(),
      n('div', null, [
        t[0] || (t[0] = c('1 ')),
        l(s) ? (o(), n('div', a, '2')) : r('', !0), //v-if
      ])
    )
  },
}
export { V as default }

可以看到 只有通过import.env.VITE_VALUE直接引用环境变量的语句才能被替换为静态值'NONE' 而且只有引用静态值的语句会在编译时计算
v-if即使使用了静态值 也不会优化