vue开发H5页面，高效压缩大体积字体资源

最近再开发H5页面时，碰到个问题，UI小姐姐给了两个大体积的中文字体资源，加起来有10M，可是我整个项目才几百kb,于是总是页面先出现，然后当字体资源加载完毕后在突然变换成绚烂的字体，这就是加载页面时的性能问题。

那么如何针对这个问题做性能优化呐？

想了下，有两种解决方案：

1：现成的线上字体压缩网站：www.fontsquirrel.com/tools/webfo…

本人亲测，虽然可以压缩字体资源，不过只能压缩1/5，即使这样还有8M,那也很大，不太满足我的需求。

2：我也是绞尽脑汁才get到了压缩字体资源的思路。

将页面中用不到的字符数据从字体资源中删除，这样剩下的就是自己需要的小容量字体资源，这样就可以实现字体资源的压缩啦。

根据思路我们需要一个中文字体压缩器：字蛛

首先我们看下他的压缩原理：

通过对本地 CSS 与 HTML 文件的爬取，将用到的字符爬取出来并将没用到的这些字符数据从字体中删除以实现压缩，再生成跨浏览器使用的格式。

正好符合我们的需求。

3：字蛛官方的介绍：

1. 简介：

   中文 WebFont 自动化压缩工具，它能自动分析页面使用的 WebFont 并进行按需压缩，
   并不需要指定字体与字符。官方网站：http://font-spider.org
   

2. 特性：

   在网页中呈现艺术字体，WebFont 会比图片拥有更好的体验，它支持选中、搜索、翻译、朗读、缩放等。
   字蛛作为一个 WebFont 压缩转码工具，拥有如下特性：按需压缩：数 MB 的中文字体可被压成几十 KB简单可靠：完全基于 CSS 规则，无需 js 与服务端辅助自动转码：支持 IE 与标准化的浏览器
   

3. 安装：

   npm install font-spider -g
   

4. 案例：

1. 构建项目结构   ，简单解释下，在fonts新建font.css,并将字体资源放进去。

2. 声明@font-face

     

3. 构造需要的字符

4. 执行命令实现字体压缩，获取需要的字体

   font-spider *.html
   

5. 我们查看压缩后的文件

   发现两个字体资源实现了成功的压缩，而新生成的.font-spider中存放着字体源文件，我们如果要在vue项目中使用，直接将压缩好的字体资源文件拷贝进去即可。（注意记得在css文件中写好@fotn-face引用）

这效率也太强大了，直接将近10M的大体积字体资源干到了54kb，这是接近两百倍的压缩比啊，这也太狂暴了吧

当时我就深刻的理解了

技术是第一生产力

这句革命性真理。伟人说的话果然是真香！

**本着写一下，玩一年，装逼不花一分钱的心态，**我将这种优化方法分享给大家。

希望大家变得更强！