组件懒加载需配合按需引入、动态导入、图标抽象层和Tree-shaking，才能解决图标库导致的包体积大、首屏卡顿等问题；推荐Iconify方案或CDN托管SVG。
组件懒加载本身不直接优化图标库，但配合按需引入、动态导入和图标组件抽象，能彻底解决一次性加载几千个 SVG 导致的包体积膨胀、首屏卡顿、内存占用高等问题。
按需引入图标，而非全量导入
大多数图标库（如 Iconify、@heroicons/react、ant-design-icons）支持单图标按需导入。避免类似 import * as Icons from 'xxx-icons' 这种全量引用方式。
- ✅ 正确做法：只导入当前组件用到的图标，例如
import { HomeIcon } from '@heroicons/react/outline' - ❌ 错误做法：导入整个图标模块再从对象中取，如
import Icons from 'xxx-icons'; const Icon = Icons['HomeIcon']—— Webpack/Vite 无法 shake 掉未使用图标 - 注意：部分库（如早期 Font Awesome）默认打包全部 SVG，必须切换到官方推荐的按需方案（如
@fortawesome/react-fontawesome+@fortawesome/free-solid-svg-icons单独 import）
用动态 import 实现图标级懒加载
对低频、非首屏图标（如设置页里的「高级导出」图标、「审计日志」图标），可进一步延迟到首次使用时才加载。
- 封装一个异步图标组件，例如：
const AsyncExportIcon = dynamic(() => import('./icons/ExportIcon').then(m => ({ default: m.ExportIcon }))) - 适用于 React（
next/dynamic或React.lazy）、Vue（defineAsyncComponent）等支持动态组件的框架 - 注意：不要对高频基础图标（如「首页」「消息」「用户」）做动态加载，HTTP 请求开销可能反超收益
统一图标抽象层 + CDN 托管 SVG
把图标从“组件”变成“配置驱动的资源”，彻底解耦渲染逻辑与图标数据。
- 采用 Iconify 方案：它不打包 SVG，而是运行时通过 JSON 配置 + CDN 加载精简 SVG 字符串，支持 100+ 图标集、自动去重、按需请求
- 自建轻量图标服务：将 SVG 文件单独部署到 CDN，组件内用
<svg><use href="/icons/home.svg#icon"></use></svg>方式引用（需启用 HTTP 缓存 + CSP 允许外链） - 优势：图标资源可独立缓存、按浏览器需要加载、支持主题色注入（fill="currentColor"）、零构建时体积增长
构建时剔除未使用的图标（Tree-shaking 增强）
确保打包工具真正删掉没被引用的图标代码，尤其当项目中存在条件渲染或字符串拼接图标名时。
- 禁用运行时图标名拼接：
❌const Icon = icons[`${type}Icon`]→ 会阻止 tree-shaking
✅ 改为显式映射：const iconMap = { home: HomeIcon, user: UserIcon } - Vite 用户可开启
build.rollupOptions.treeshake.moduleSideEffects并确认图标文件标记为"sideEffects": false（多数现代图标库已默认支持） - 用
rollup-plugin-visualizer或source-map-explorer检查最终产物中是否残留未用图标代码
