vue项目优化打包 压缩字体文件,使用字蛛(font-spider)

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压缩(这个需要配合后端一起做,前两个是前端就可以单独做优化的)

猜你喜欢

转载自blog.csdn.net/weixin_42821697/article/details/123294977