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

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

优化

我按照官方文档配置了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特有的配置被忽略了？

我来解答赞 5 收藏

反馈

1 条解答

___怡博 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