博客

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

  • Post author:
  • Post category:vue


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


版权声明：本文为weixin_42821697原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。