1.安装
npm install font-spider -g
2.查看版本: font-spider -v
出现版本号就代表成功
3.因为vue打包项目生产的文件后缀都会生成动态字符,所以我们在存放字体的文件夹里面新建一个index.html,引入字体文件,字蛛会帮我们自动检测
4.cmd进入font文件夹,输入命令font-spider index.html
5.成功,对比字体前后大小
从10m变成了2k,优化度极高
6.现在查看打包前后体积
21m变成了6m(我项目中优化了三个字体文件,因为这里是教程,所以只在index.html代码写了一个,便于大家查看)
总结:vue项目优化包体积有三种方式
1.不生成map文件 教程文件链接
2.压缩字体文件
3.开启gzip压缩(这个需要配合后端一起做,前两个是前端就可以单独做优化的)