import { Search, Close } from 'lucide-vue-next';
# 避免 import * as Icons from 'lucide-vue-next'
项目里只用了 12 个图标,打包后字体文件 310KB,构建报告里图标库排在体积前三。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:整包引入会把全部字形打进产物,tree-shaking 对字体文件不起作用,它是一整个二进制资源,没被引用的字形也一起下载。
「图标库按需引入」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。同一份配置存在多处的,先确认改的是被加载的那一份。
新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。
处理上按这个顺序:改用按需引入的组件形式 每个图标单独一个入口;或者保留字体但重新子集化 只打用到的字形;构建后看产物体积报告 确认字体那一项降下来。
确认没问题再收工,构建报告里图标相关体积降到 20KB 以内,页面图标显示正常。
