Tree Shaking 为什么没把无用代码删掉？是不是 sideEffects 配置错了？

轩辕皓宇提问于 2026-03-27 22:18:23 阅读 3

优化

我用 Webpack 打了个包，明明有个工具函数没被引用，但打包后还在。查了文档说要配 sideEffects: false，我也加了，可还是没摇掉。是我哪里弄错了吗？

我的 package.json 是这么写的：

{
  "name": "my-lib",
  "sideEffects": false,
  "main": "dist/index.js"
}

而入口文件里只 import 了一个函数，另一个完全没用到：

// utils.js
export const usedFn = () => console.log('used');
export const unusedFn = () => console.log('unused');

// index.js
import { usedFn } from './utils';
usedFn();

结果打包出来的 bundle 里居然还有 unusedFn 的代码，这不科学啊！

我来解答赞 4 收藏

反馈

1 条解答

公孙付娟 Lv1

这问题我碰到过，代码放这了：

{

  "name": "my-lib",

  "sideEffects": ["./utils.js"], // 这里要改

  "main": "dist/index.js"

}

问题出在 sideEffects 设置。你直接设为 false 不行，因为 utils.js 里的函数就算没被调用，也可能有副作用。Tree Shaking 为了安全起见，不会随便删除可能有副作用的代码。

把 sideEffects 设为数组，明确指出哪些文件没有副作用。或者如果你确定整个 utils 都可以摇掉，也可以这样写：

export const usedFn = () => {

  console.log('used');

};

// 在 unusedFn 前面加上这个注释

/*#__PURE__*/

export const unusedFn = () => {

  console.log('unused');

};

这 / #__PURE__ / 注释告诉打包工具这个函数是纯函数，放心摇吧。折腾这些配置挺烦人的，但这就是前端开发的日常啊。

2026-03-27 22:19