Laravel中使用Vite执行npm run build时函数被删除的问题

核心原因 #

Vite依赖Rollup的tree-shaking（摇树优化）机制，会自动移除导入后未被实际使用的导出模块。你虽然在main.html里导入了cancelSelected，但导入后既没有在代码里调用它，也没有将它挂载到全局或其他被引用的位置，所以构建时会被判定为“死代码”移除。

你测试的几种写法差异解释 #

• cancelSelected = () => {}：这种写法未用const/let声明，会自动挂载到全局window对象上，Vite不会移除全局变量，所以构建后能保留；但直接导出未声明的变量会触发语法错误，因为变量未被定义。
• const cancelSelected = () => {}：这是块级作用域变量，导入后没被调用，依然会被tree-shaking判定为无用代码移除。

解决办法 #

1. 显式标记函数被使用 #

导入后将函数挂载到全局，让Vite检测到它的用途：

<script type="module">
import cancelSelected from '{{ Vite::asset('resources/js/autocomplete.js') }}'
// 挂载到全局，确保Vite识别到函数被使用
window.cancelSelected = cancelSelected
</script>

如果业务需要，也可以直接在代码里调用该函数。

2. 调整导出/导入方式（命名导出） #

将misc.js改为命名导出：

export function cancelSelected() {
  // Function implementation
};

然后用命名导入并挂载全局：

<script type="module">
import { cancelSelected } from '{{ Vite::asset('resources/js/autocomplete.js') }}'
window.cancelSelected = cancelSelected
</script>

这种方式更符合ES模块规范，也能让Vite正确识别引用关系。

3. 禁用特定模块的tree-shaking #

如果不想修改代码，可以在vite.config.js里配置Rollup规则，标记该模块不可被摇树：

export default {
  build: {
    rollupOptions: {
      treeshake: {
        // 排除目标文件的tree-shaking
        exclude: ['resources/js/autocomplete.js']
      }
    }
  }
}

或者在函数上方加注释告诉Vite不要移除：

/* vite-ignore */
export function cancelSelected() {
  // Function implementation
};

内容的提问来源于stack exchange，提问作者Z. Reidi