标签: #Tree Shaking

2026年08月16日全栈工程化

你的 Tree shaking 在生产环境不生效，可能不是工具的问题，而是 sideEffects 没写对

`sideEffects` 字段配置不当是生产环境 tree shaking 失效的主因，而非打包工具本身。未设置或设为 `true` 会让工具保守保留所有代码；设为 `false` 可安全删除未使用导出，但需注意全局 CSS 和 polyfill 等有副作用文件需用数组单独列出，且 glob 路径要覆盖子目录。组件库若使用 CommonJS 或动态导出结构会破坏静态分析，导致 tree shaking 失效。验证时应直接检查产物内容或使用 `optimizationBailout` 定位原因，而非仅看构建日志。

#Tree Shaking #Webpack #sideEffects

别让整个组件库都打进包里——从 entry 出口设计开始做 Tree Shaking

组件库 Tree Shaking 失效的根源在于入口文件采用全量导出模式，迫使打包工具加载所有模块。解决方案是将入口拆到组件粒度，为每个组件建立独立入口，配合 package.json 的 exports map 提供友好路径。同时需正确配置 sideEffects 数组标记 CSS 等有副作用文件，避免样式丢失。构建时保持文件结构输出而非单一 bundle，并通过 stats 分析验证优化效果。