02-输出体积优化

输出体积优化

Tree Shaking、代码压缩、资源优化

---

📋 学习目标

• ✅ 理解 Tree Shaking 机制
• ✅ 掌握代码压缩配置
• ✅ 了解资源优化方法
• ✅ 掌握体积分析工具

---

Tree Shaking

自动 Tree Shaking

ESBuild 自动进行 Tree Shaking：

{
  bundle: true,
  treeShaking: true  // 默认启用
}

工作原理

ESBuild 会：

1. 分析依赖关系
2. 移除未使用的代码
3. 优化导入导出

---

代码压缩

压缩选项

{
  minify: true,              // 全部压缩
  minifyWhitespace: true,    // 压缩空白
  minifyIdentifiers: true,   // 压缩标识符
  minifySyntax: true         // 压缩语法
}

---

资源优化

资源处理

{
  loader: {
    '.png': 'file',
    '.jpg': 'file'
  },
  assetNames: 'assets/[name]-[hash]'
}

---

体积分析

使用工具

# 安装分析工具
npm install -D esbuild-bundle-analyzer
 
# 分析构建结果
npx esbuild-bundle-analyzer dist

---

相关链接

• ESBuild Tree Shaking
• ESBuild MOC

---

最后更新：2025

---

ESBuild 体积优化