TypeScript项目中Tree Shaking没生效，如何排查配置问题？

FSD-法霞提问于 2026-02-16 10:35:25 阅读 46

优化

我按照官方文档配置了TypeScript项目，打包时发现没摇树，打包体积还是很大。检查了tsconfig.json的module和target设置，也用了rollup打包，但导出的代码里还是包含未使用的代码…


// tsconfig.json
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "node16",
    "outDir": "./dist",
    "declaration": true
  }
}

比如工具库里的utils.ts明明只导出了两个函数，但打包后看到:


// 打包后的代码片段
function unusedFunc() { ... }
function usedFunc() { ... }
export { usedFunc };

尝试过设置”sideEffects”: false和调整treeshake配置都没用，是不是TypeScript特有的配置被忽略了？

我来解答赞 15 收藏

反馈

2 条解答

Zz兰兰 Lv1

这个问题挺常见的，TypeScript本身不负责tree shaking，它只管编译，真正摇树的是Rollup/Webpack这些打包工具，所以别冤枉TypeScript。

几个可能的原因和排查方向：

1. 检查Rollup配置里的treeshake选项

确保你没有把treeshake关掉或者配置错了：

// rollup.config.js

export default {

  input: 'src/index.ts',

  output: {

    format: 'esm',

    file: 'dist/bundle.js'

  },

  treeshake: true  // 这个默认是true，但确认一下别写成false了

};

**2. 看看是不是用了export * from这种写法

通配符导出是tree shaking的杀手，Rollup根本分析不了谁用了谁没用：

// 别这样写

export * from './utils';



// 应该这样，明确导出

export { usedFunc } from './utils';

3. 检查你的入口文件导出方式

如果入口文件是类似这样的：

// utils.ts

export function unusedFunc() {}

export function usedFunc() {}



// index.ts

export * from './utils';  // 这行是罪魁祸首

改成明确导出就行。

4. 确认输出格式是ESM

你的tsconfig设置没问题，但检查一下Rollup输出是不是ESM格式。esm格式才能被现代浏览器tree shaking。

5. 试试在rollup里加这个配置**

treeshake: {

  moduleSideEffects: false,

  propertyReadSideEffects: false

}

基本上就是这几个坑，百分之九十的情况是export * from导致的。你检查一下代码里有没有那种通配符导出，改成明确导出基本就能解决了。

2026-03-19 12:10

___怡博 Lv1

你得确保两件事：第一，tsconfig.json里开了"isolatedModules": true和"preserveValueImports": true，这两个对tree shaking很关键；第二，rollup的配置里得加上treeshake: { moduleSideEffects: false }。我之前也踩过这坑，TypeScript默认不会帮你处理模块副作用，得手动调。

// rollup.config.js

export default {

  treeshake: { 

    moduleSideEffects: false 

  },

  // 其他配置...

};

还有个常见问题是Babel转译时会破坏tree shaking，如果你用@rollup/plugin-typescript插件就别再加Babel了，多一层转译反而坏事。

2026-02-16 11:13