返回博客
Comparison 2026-04-13

Minify vs Bundle vs Tree-shake: 每个做什么

组合在一起以缩小JavaScript有效负载的三种正交优化。

构建管道经常模糊这些术语。每个做不同的事,通常都需要。

Minify

删除所有不改变行为的内容: 空格、注释、长名称。

Bundle

将多个文件连接为较少的HTTP请求。

Tree-shake

消除导入但从未执行的代码。需要ESM。

组合顺序

1. Bundle

2. Tree-shake

3. Minify

4. Compress

现代默认

Vite、esbuild、webpack、Bun全部。