Vite中如何排除Ag-Grid自定义过滤器文件的Tree Shaking？

我有一个Vue应用，使用Ag-Grid框架，同时开发了名为BooleanFilter.vue的Vue组件作为Ag-Grid的自定义列过滤器。组件代码如下：

<template>
  <div class="ag-filter">
    <div>
      <div class="ag-filter-body">
        <label class="radio-option">
          <input type="radio" name="value" value="True" v-model="state.value" @change="updateFilter">
          {{ t('Global.True') }}
        </label>
        <label class="radio-option">
          <input type="radio" name="value" value="False" v-model="state.value" @change="updateFilter">
          {{ t('Global.False') }}
        </label>
        <label class="radio-option">
          <input type="radio" name="value" value="" v-model="state.value" @change="updateFilter">
          Clear
        </label>
      </div>
    </div>
  </div>
</template>


<script setup>
const { params } = defineProps();
const { field } = params.colDef;
const state = reactive({
  value: ''
});

 
const isFilterActive = () => {
  return state.value !== '';
}

const updateFilter = (value) => {
  params.filterChangedCallback();
}

const doesFilterPass = (params) => {
  return params.data[field] == state.value;
}

const getModel = () => {
  if (state.value === '') {
    return undefined;
  }
  
  return {
    filter: state.value,
    type: 'equals'
  }
}

const setModel = (model) => {
  if (model !== null) {
    state.value = model.filter;
  }
}
</script>

生产构建时，Vite的Tree Shaking误删了该Ag-Grid扩展文件中的isFilterActive、setModel、getModel等方法，如何仅针对该文件禁用Tree Shaking？

针对单个文件避免Tree Shaking误删方法，有以下几种可行方案：

方案1：显式暴露组件方法 #

由于<script setup>中定义的方法默认是组件私有，Ag-Grid通过隐式调用这些方法时，Vite会判定它们未被使用。可以通过defineExpose显式暴露Ag-Grid所需的方法，让打包工具明确知道这些方法被外部依赖：

<script setup>
// ... 原有代码保持不变

// 显式暴露Ag-Grid需要调用的方法
defineExpose({
  isFilterActive,
  doesFilterPass,
  getModel,
  setModel,
  updateFilter
})
</script>

这个方案无需修改全局配置，直接从组件层面解决问题，是最推荐的方式。

方案2：在Vite配置中标记文件为有副作用 #

通过Vite的Rollup配置，将目标文件标记为有副作用，让Tree Shaking跳过对它的代码删除：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 替换成你的BooleanFilter.vue实际文件路径
        sideEffects: ['src/components/BooleanFilter.vue']
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者martonx