如何用 Tree-shaking 自动剔除未引用的冗余库代码

张开发
• 2026/4/13 19:45:32 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

如何用 Tree-shaking 自动剔除未引用的冗余库代码
Tree-shaking未生效主因是模块格式与打包器分析能力不匹配需确保ESM规范、避免CommonJS混用、精准导入子路径、检查sideEffects声明及导出方式并在production构建后通过stats或可视化工具验证。Tree-shaking 为什么没生效先看打包器和模块格式Tree-shaking 不是开关而是依赖打包器如 webpack、vite、esbuild对 ESMimport/export静态结构的分析能力。用 require 或 CommonJS 模块比如 lodash 的 const _ require(lodash)基本无法摇掉任何东西——因为执行时才决定引用关系。实操建议确保你的代码和所用库都以 ESM 形式提供查 package.json 中是否有 type: module 或 exports 字段指向 .mjs / ESM 入口避免混用import { debounce } from lodash 是 OK 的但 import _ from lodash _.debounce 会把整个包引入vite 默认只对 node_modules 中明确标记 sideEffects: false 的包做深度摇webpack 需在 optimization.usedExports: true 下配合 mode: production第三方库不支持 Tree-shaking手动指定入口或别名很多库如 lodash、date-fns虽支持 ESM但默认 import 仍可能拉入未用代码原因常是导出方式不够“纯”比如有动态 key、export *、副作用初始化。实操建议优先用子路径导入import debounce from lodash/debounce绕过主入口的聚合导出对 date-fns 这类已按功能拆包的库直接 import format from date-fns/format比 import { format } from date-fns 更安全在 webpack 中配 resolve.alias 把 lodash 映射到 lodash-esvite 可用 optimizeDeps.include depPrebundle 控制预构建行为开发时看着没删其实是 HMR 或 source map 干扰了判断常见错觉“我明明没用 fooUtils但打包后体积没变”。往往不是 Tree-shaking 失败而是你在 dev 模式下看产物比如 webpack-dev-server 内存编译、或启用了 devtool: source-map 导致生成冗余映射信息。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西

更多文章