tree shaking 能过滤未使用的图标库，前提是图标以 es 模块方式命名导入且调用关系可静态分析；动态拼接、运行时反射或 commonjs 导入会阻断该过程，需选用 esm 图标库并验证打包产物。
Tree Shaking 能过滤未使用的图标库，但前提是图标必须以 ES 模块方式导入，且调用关系能被静态分析识别。如果图标是通过字符串动态拼接、运行时反射或 CommonJS 导入，Tree Shaking 就无法生效。
确保图标库提供 ESM 版本并正确使用命名导入
很多图标库（如 @heroicons/react、lucide-react、tabler-icons-react）默认导出为 ES 模块。使用时应避免默认导入整个包，而要精确导入所需图标：
- ✅ 正确（可被 shake）：import { HeartIcon, StarIcon } from "@heroicons/react/outline"
- ❌ 错误（无法 shake）：import * as Icons from "@heroicons/react/outline" 或 import Icons from "@heroicons/react/outline"
避免动态导入或字符串映射（会阻断静态分析）
以下写法会让构建工具（如 Webpack/Vite）无法判断哪些图标实际被使用：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- ❌ const Icon = iconsMap[iconName]（运行时查表）
- ❌ React.createElement(iconName + 'Icon')（字符串拼接）
- ✅ 替代方案：用条件渲染或对象字面量显式列出依赖项，例如：{ type === 'heart' &&
}
检查打包产物确认是否生效
不要只信文档，实际验证最可靠：
- 在 Vite 中运行 npm run build -- --report，查看
dist/.vite/report.html中图标组件是否出现在 chunk 里 - 在 Webpack 中启用
stats: "verbose"或使用webpack-bundle-analyzer插件，搜索图标名是否残留 - 若发现未引用的图标仍被打包，大概率是某处存在隐式全量导入或动态访问
选用支持自动按需引入的图标库或插件
有些库或工具链能进一步简化流程：
- @iconify/react：按需加载远程 SVG，本地不打包图标代码
- Vite 插件如 vite-plugin-svg-icons：预编译 SVG 为 React 组件，配合 glob 导入也能保留 Tree Shaking
- 自定义 Babel 插件或 SWC 插件（如 babel-plugin-import）可将
import { X } from 'xxx'自动转为子路径导入，提升 shake 精度
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
