React项目中为什么Tree Shaking没删除未使用的导出函数？

W″蕴轩提问于 2026-01-31 21:04:25 阅读 59

优化

我在React项目里用ES6模块导出了一些工具函数，但打包后发现未使用的函数仍然留在bundle里。比如这个utils.js：


// utils.js
export function useFetch() { /* ... */ }
export function debounce(func) { /* ... */ }
export function throttle(func) { /* ... */ }

组件里只导入了useFetch：


// MyComponent.jsx
import { useFetch } from './utils';
function MyComponent() {
  // 只使用了useFetch
  return Test;
}
export default MyComponent;

已经确认用Webpack 5 + Babel配置，production模式打包。按理说未引用的debounce/throttle应该被摇树删除，但bundle分析工具显示它们还在。这是配置哪里漏了吗？是不是导出方式有问题？

我来解答赞 9 收藏

反馈

1 条解答

恒鑫 Dev Lv1

这个问题挺常见的，主要是因为你用的是ES6的named export方式导出函数，而这种方式可能会让Webpack的Tree Shaking失效。原因在于，当使用export function直接导出时，打包工具无法确定这个函数是否真的没被其他地方引用（比如通过动态导入的方式）。

解决方法很简单，改用default export或者将所有工具函数先定义好再统一导出。比如：

// utils.js

function useFetch() { /* ... */ }

function debounce(func) { /* ... */ }

function throttle(func) { /* ... */ }



export { useFetch, debounce, throttle };

这样写后，记得确保Babel配置中启用了@babel/preset-env插件，并且设置了modules: false，否则Babel会把ES模块转换成CommonJS模块，导致Tree Shaking彻底失效。

另外提醒一下，生产环境中务必确认以下几点：
1. Webpack配置里mode: 'production'
2. Babel不要乱转模块格式
3. 不要用import *引入模块，这会让所有内容都被打包进去

最后，检查完这些如果还是有问题，可以试试清理缓存重新打包。说实话，有时候Webpack也会耍点小脾气，记得多试几次。

2026-02-01 08:02