为何@kalimahapps/vue-icons图标加载缓慢？

1. 验证是否存在未正确树摇的全量打包问题 #

虽然你使用了按需导入语法，但部分图标库可能存在打包时未自动树摇的情况。可以先查看@kalimahapps_vue-icons.js的实际体积：

• 在Network面板中查看该文件的Size列，若体积超过几MB，说明大概率是打包了全量图标。
• 解决尝试：直接导入单个图标的具体文件路径，替代从库根导入的方式：

import CaSunrise from '@kalimahapps/vue-icons/dist/icons/CaSunrise.vue'
import CaSunset from '@kalimahapps/vue-icons/dist/icons/CaSunset.vue'

2. 清除Vite依赖预构建缓存 #

Vite的预构建缓存若损坏或构建异常，会导致依赖加载变慢：

• 执行命令清除缓存：

rm -rf node_modules/.vite

• 重启开发服务器，再次观察该依赖的加载耗时。

3. 排查本地开发环境资源瓶颈 #

• 查看本地CPU、内存占用率，若开发环境资源被其他程序占用过多，会直接拖慢依赖的构建和加载速度。
• 关闭后台高资源占用程序后，重新启动项目测试。

4. 检查依赖包版本问题 #

旧版本的@kalimahapps/vue-icons可能存在未优化的打包体积问题：

• 查看当前依赖版本：

npm list @kalimahapps/vue-icons

• 尝试升级至最新版本：

npm update @kalimahapps/vue-icons

5. 手动配置Vite优化规则 #

在vite.config.js中对该依赖强制开启树摇和预构建优化：

export default defineConfig({
  optimizeDeps: {
    include: ['@kalimahapps/vue-icons'],
    esbuildOptions: {
      treeShaking: true
    }
  }
})

内容的提问来源于stack exchange，提问作者Feruz Atamyradow