js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件

闲言少叙 下载 安装

Font-spider npm
跟着官方教程操作就OK了

使用

之前引入字体,发现都很大,非常影响加载速度,
font-spider可以抽离出你使用到的字体,
但是对于单页面的动态数据有点不可行,
因为你也不知道返回的数据到底有哪些字体,
所以我抽离的少一些固定的标题和十个数字字体。

一、测试文件夹如下

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件_第1张图片

二、html里面引入字体,在页面输出用到的字体,方便font-spider抽取

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件_第2张图片

三、运行 gitbash

测试一下font-spider是否全局安装 切记要在测试文件夹下运行js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件_第3张图片

四、运行 一定要开启 --debug模式,方便看报错

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件_第4张图片

五、修成正果,1M压缩到了4kb,真香!

js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件_第5张图片

Thanks for Font-spider Tearm!

你可能感兴趣的:(js vuecli react-app 字体引入加载缓慢 ,font-spider 根据使用字体生成新的字体文件)