AI 摘要：本文通过实际案例演示了 7 种减少 React 应用打包体积的方法，最终实现 30% 的优化效果。核心策略包括消除副作用代码、清理未使用的依赖、避免 Barrel 文件、优化导出方式、替换重型库、动态加载非关键资源等，并提供了详细的代码对比和工具推荐。

1. 前言
• 问题背景：随着应用迭代，打包体积膨胀导致构建变慢、用户体验下降。
• 优化前 vs 优化后：从 283.39 kB 降至 198.33 kB，减少 30%。
2. 具体优化步骤
• Step 1: 消除文件副作用
• 移除 window 全局副作用代码，避免强制打包未使用的文件。
• Step 2: 清理未使用的文件和依赖
• 使用 npx knip 检测并删除冗余代码（如未使用的 lodash-es ）。
• Step 3: 避免 Barrel 文件
• 直接导入组件而非通过 index.js 聚合，减少不必要的文件处理。
• Step 4: 直接导出函数而非对象/类
• 仅导出被调用的函数（如 getTimeInFormat ），避免打包未使用的方法。
• Step 5: 替换重型库
• 用轻量级 dayjs 替代 moment.js ，显著减小体积。
• Step 6: 动态加载非关键包
• 按需加载 fuse.js（搜索功能库），拆分初始包。
• Step 7: 动态加载非关键组件
• 使用 React.lazy 延迟加载非首屏组件（如 Dashboard）。
3. 额外建议
• 在 package.json 标记 "sideEffects": false 增强 Tree-Shaking。
• 使用 Bundlewatch 监控打包体积。

FrontendJoy

✨ How I Reduced My React Bundle Size by 30% (With Real Examples)

A step-by-step guide to shrinking your React bundle with a real example